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?

Answer 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.