How to get jQueryUI drag\drop working with touch devices

Question

This is one situation where I hope someone replies to tell me I'm an idiot. But I continue to be amazed that jQueryUI drag\drop doesn't work with touch devices. I have not tested them all but I have tried iphone\ipad\android 2, 3&4 over the last year and nothing. Just tried the latest version on a new Android. Still nothing. Don't believe me, just visit the demo page on a mobile device and try to use the drag\drop examples. Nothing.

Is there a technical problem or core incompatibility in play here? A fix so easy that its not worth writing about? Do jQuery devs not use mobile devices? I have seen "fixes" posted here and there around Stack Overflow but they are all "hacks" and all the ones I've tried don't work.

I'm perplexed. Can someone shed some light on this issue?

Solution 1

If you just want your current jQuery UI code to work with touch events, you can use the jQuery UI Touch Punch monkey patch.

The only "technical problem or core incompatibility" is that jQuery UI (1.x) only listens for mouse events, not touch events (See @ScottGonzales's response for the historical reason). jQuery touch punch, above, makes that change. You can even try some of the jQuery UI examples on that page, and they work. Generally, using Touch Punch is the currently accepted solution.

Solution 2

There's a long history behind why jQuery UI doesn't support touch devices, but it boils down to the fact that Touch Event was a non-standard WebKit-specific implementation. At the time, the future looked dreary. Apple held patents that nobody wanted to go near; as a result, Mozilla implemented their own touch event system with streams which never caught on. It wasn't clear what Microsoft and Opera would do. Paul Bakaus (the creator of jQuery UI) wanted to land iPhone support 4 years ago. I wanted to wait for an official standard.

Time passed, Mozilla abandoned their touch events and Microsoft implemented their own pointer events system. The W3C formed a Working Group to standardize Touch Events and investigate the Apple patents. The Touch Events Working Group has published a recommendation and disbanded. Microsoft eventually submitted a proposal to standardize Pointer Events and there is now a W3C Pointer Events Working Group.

We're currently working on a device-agnostic rewrite of all jQuery UI interactions which will be part of jQuery UI 2.0. Until then, you can use jQuery UI Touch Punch.

Earlier this year, I wrote about some of the history around Touch Events and why Pointer Events provide a better future. You can read about it on the jQuery blog.

Comments

[IvanM]

"Touch Punch monkey patch" sounds

[MaxAuray]

Not the best solution: if the element to drag takes the whole viewport, using jQuery UI Touch Punch prevents the document to be scrolled. Can be even a problem with element you want to be only draggable horizontally with a container hiding overflow, as a draggable carousel. In this case, the carousel prevents user to scroll the document up and down. I prefer jQuery Touch (github.com/ajlkn/jquery.touch) which makes draggable possibly touch only on mobile (mouse gesture can be filtered) and does not prevent touch events to propagate (thus, document to be scrolled).

[MaxAuray]

Not the best solution: if the element to drag takes the whole viewport, using jQuery UI Touch Punch prevents the document to be scrolled. Can be even a problem with element you want to be only draggable horizontally with a container hiding overflow, as a draggable carousel. In this case, the carousel prevents user to scroll the document up and down. I prefer jQuery Touch (github.com/ajlkn/jquery.touch) which makes draggable possibly touch only on mobile (mouse gesture can be filtered) and does not prevent touch events to propagate (thus, document to be scrolled).

[MaxAuray]

Seems discontinued, check jQuery Touch (github.com/ajlkn/jquery.touch).

[forivall]

@MaxAuray Your comment would make an excellent alternate answer to this question! Note that jquery.touch didn't exist in 2012, when i originally answered this >_<