HTML Drag And Drop On Mobile Devices

javascript html jquery-ui mobile-devices
Fenton picture Fenton · Jul 3, 2010 · Viewed 131.2k times · Source

When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone for scrolling around the page etc?

All solutions welcome... my initial thoughts are:

  1. Have a button for mobile devices that "lifts" the item to be dragged and then get them to click the zone they want to drop the item on.

  2. Write an app that does this for mobile devices rather then try and get the web page to work on them!

  3. Your suggestions and comments please.

Answer

vichsu picture vichsu · May 11, 2012

jQuery UI Touch Punch just solves it all.

It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI. Tested on iPad, iPhone, Android and other touch-enabled mobile devices. I used jQuery UI sortable and it works like a charm.

http://touchpunch.furf.com/

Related questions

Can I make a <button> not submit a form?

I've got a form, with 2 buttons <a href="index.html"><button>Cancel changes</button></a> <button type="submit">Submit</button> I use jQuery UI's button on them too, …

Read More
Using jQuery how to get click coordinates on the target element

I have the following event handler for my html element jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); I need to find the position of the mouse on the #seek-bar at the time …

Read More
How to make <input type="date"> supported on all browsers? Any alternatives?

I'm working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes. I tried Modernizr but I can't understand on how to integrate it on my website(on how to code it/what is the syntax/…

Read More