HTML Drag And Drop On Mobile Devices

Question

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.

UPDATE: Bounty

If someone can tell me how to make drag and drop work in a web page on a mobile device, without resorting to points 1 and 2 above, I will swing a wonderful bounty of 50 rep your way!

Answer 1

The beta version of Sencha Touch has drag and drop support.

You can refer to their DnD Example. This only works on webkit browsers by the way.

Retrofitting that logic into a web page is probably going to be difficult. As I understand it they disable all browser panning and implement panning events entirely in javascript, allowing correct interpretation of drag and drop.

Answer 2

Hello to everyone checking out this question.

If you are looking for a lightweight answer to this question, I am currently experimenting to find a solution that works on both mobile devices and normal browsers.

(Link removed, see below)

Currently, I have something that functionally works as a drag and drop in a desktop browser (without animating the item being moved) and as a "tap and drop" in a mobile browser (tested on Android OS).

I hope this helps as an alternate to the other answers posted - it uses jQuery 1.4 and a couple of lines of script - you could actually do this totally without jQuery in about as many lines. I will evolve the example as a refine the technique.

Update

I have rolled the initial version of this script into a jQuery plugin, which can be found here:

http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/