How to get jQueryUI drag\drop working with touch devices

jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
Brian picture Brian · Dec 18, 2012 · Viewed 50.4k times · Source

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

forivall picture forivall · Dec 18, 2012

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.

Related questions

jQuery Droppable, get the element dropped

A small question hopefully with a simple answer, I am using jQuery draggable and droppable to place items into a dock. Using the below code for the drop. $("#dock").droppable({ drop: function(event, ui) { //Do something to the element dropped?!? } }); …

Read More
How do I highlight a droppable area on hover using jquery ui draggable

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it …

Read More
jQuery drag and drop - checking for a drop outside a droppable

My apologies if this was answered in another question, I could not find an answer specific to my problem! I'm trying to test whether a jQuery draggable is being dropped outside of a legal droppable. This would normally be solved 90% …

Read More