Pointer events proof of concept

[bethge]

The draggable, droppable and slider demos should work nicely on touch devices.

Few things were changed in mouse.js, just minor adaptions and the adding of the touch-action attribute to the widget.

Phantomjs does not get along with PEP yet though. For the moment, I added a polyfill for phantom's missing .bind() function, but phantomjs is still missing MutationObservers.

The draggable in-browser unit test suite runs well on iOS (Chrome & Safari) and Android (Chrome) with a few pixels off here and there. On IE11, the unit tests on are not too happy, although the demos work fine.

[jzaefferer]

Thanks for the PR! This looks promising to me. It looks like we need to focus on PEP for now, to get that ES3 compatible and to work in IE8+. Would also be nice to have a grunt QUnit plugin that uses PhantomJS 2.0+, since that should support .bind() and other "modern" features.

I'd like to discuss this approach at the next jQuery UI team meeting (see http://meetings.jquery.org/ for schedule), before we put more work into this PR. Until then I hope you can dig deeper into PEP.

[bethge]

Great, thank you for the feedback. I am digging into PEP and have started looking into the IE8 Event handling system.

[jzaefferer]

Since there was no issue for that, I just filed one: jquery-archive/PEP#174 - its rather vague, so you may need to bug Scott or others to provide more details.

[arschmitz]

@bethge what iOS version / device combo did you run this on? When i try it on iOS 8 iPhone 6 draggable unit tests have 87 failures. Most of the failures appear to be legitimate. The demos do seem to work fine though, and the unit tests do pass on desktop safari.

[bethge]

@arschmitz You are very much right. I must have mixed something up. Furthermore, Safari iOS (Simulator and iPhone 5s on iOS 8) gets stuck on the connectToSortable tests. I will look into it.

[bethge]

I did some digging, focusing on the "draggable: core: element types" test case, as it appears to be the most simple drag interaction.

Runs successfully in:

• OSX, Chrome 41, 43.0
• OSX, Firefox 36.0.4, 37.0.1
• OSX, Safari 8.0.4
• iOS iPhone 5s, Chrome 41.0

Fails in:

• iOS Simulator (iPad Air), Safari [Used for debugging]
• iOS, iPhone 5s, Safari

The test case simulates a mouse-based drag. For the successful setups, the clientX/Y and pageX/Y are identical, but for the failing setups, they are not. I have not figured out, if this is the cause or just a repercussion.

I experience the same success and failure behavior for this test case for the current master (i.e. without PEP + pointerevents) with an iPhone 5s: The test succeeds in Chrome, but fails in Safari.
Essentially, simulated mouse-based interactions fail for Safari and succeed for Chrome on a touch-based iOS device. I feel like testing mouse-based drag interactions on a touch-based device does not cover a real use case.

Off the top of my head I would say either touch-based interactions need to be simulated for touch-based devices, or one goes with simulated pointer events.

On a side note: The test case does run through successfully even for the failing setups, if breakpoints are set at each event trigger (I can only guess why that is).

[jzaefferer]

@bethge considering that the code now only binds pointer events, simulating those seems like the right thing to do. We must be able to rely on the polyfill for the mapping of mouse and touch events.

[jzaefferer]

Thank you @bethge for putting this together! I tried to rebase it, but we had too many other changes since. I've put a new patch together in #1611, pushed to this repository, so that its easier to collaborate on that branch.