Automatically set touch-action: none

[appsforartists]

There's a maddening property of PointerEvents: touch only triggers one move unless you set touch-action. I know this and it still bites me occasionally - I imagine it's even more frustrating for people who haven't worked with touch before.

Here's a potential solution:

• Check style.touchAction and getComputedStyle(target).touchAction for auto
• If it is auto, cache the current value, then set style.touchAction = none
• When the drag is completed, revert the style change.

It does the right thing for the most common situtation and deflect to the author's decision if one has been made. Still, if that's too magical, we can also try this:

• If NODE_ENV !== production, use getComputedStyle to assert that touchAction !== auto, and log a warning if it is.

[davidkpiano]

Putting this here for reference - might be good to see how Hammer.JS handles this: http://hammerjs.github.io/touch-action

[appsforartists]

Sounds like they auto-set it based on a combination of which gesture you're listening to and what parameters are passed in. Have you played with Hammer and its touchAction property before?

[appsforartists]

💻 I'm working on a diff at http://codereview.cc/D3151

[appsforartists]

http://crbug.com/717796 was marked WontFix. Thus, we'd have to set the style permanently, not just in pointerdown, to do this effectively.

Maybe we should. It defeats the point of having Draggable be an interaction if you need to know to set this magic CSS property for it to work correctly in Chrome with a touchscreen. I'm reluctant to automatically set a CSS property, but it seems better than the alternative.

If @jverkoey's proposal to add enable() and disable() methods to interactions lands, those would be a good place to check axis and set element.style.touchAction appropriately.