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 no

Answer 1

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.

Answer 2

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.

Answer 3

Check out jQTouch

It's a jQuery plugin that helps bridge the event gaps between desktop and touch devices.