HTML5 Drag and Drop API on Touch Screen Devices

api html drag-and-drop touchscreen
Qcom picture Qcom · Aug 1, 2010 · Viewed 36.2k times · Source

I was just wondering if the HTML5 API for Drag and Drop included support for touch screen displays.

I was thinking of iPhone, but I know this isn't supported yet. I was wondering if that is just catching up on the part of Apple, to support HTML5 drag and drop on Safari mobile, but I also was thinking maybe the HTML5 API wasn't powerful enough for this, but I highly doubt that.

How about on a standard touch screen laptop tablet or the like, I don't have one so I can't test but I would imagine that support is included because, as far as I know, that table interface just replaces mouse control, so, as far as the browser is concerned, the end-user is really just using a mouse.

Any thoughts?

Answer

Jim Jackson II picture Jim Jackson II · Nov 21, 2011

Old thread but since I've got some experience and it is still a problem I'll give it a shot...

Touch and drag/drop do not really play nicely together. Consider that for drag and drop you have an implied mouse-down => mouse-move => mouse-up sequence of events. In a touch environment you have not only the standard touchstart, touchmove and touchend events but you also have actual gestures that have specific meanings on varous platforms. These gestures are combinations of touch events, their order and their timing.

So how would you drag an element using touch? By capturing the touchstart and touchmove? No. Due to the fat-finger problem, almost every touch event has both a touchstart and touchmove. You can also have two touchstarts with only one touchmove occasionally with a dirty screen.

How about capturing touchstart and then waiting to see if the user has moved a certain distance? Nope, the problem there is that the user will see the 'glitch' when he has moved his finger 15 pixels (or whatever distance) and nothing happens and then the element suddently snaps to his finger position. The normal reaction is to lift the finger, which in this scenario would initiate a drop, the wrong answer.

In the end, trying to develop an interface where some elements are stationary and others can, but don't have to be, draggable is trying to fit a desktop environment into a touch device. The paradigms do not fit.

Better to look at the various touch frameworks and use the built-in gestures.

Related questions

Allow Access-Control-Allow-Origin header using HTML5 fetch API

I am using HTML5 fetch API. var request = new Request('https://davidwalsh.name/demo/arsenal.json'); fetch(request).then(function(response) { // Convert to JSON return response.json(); }).then(function(j) { // Yay, `j` is a JavaScript object console.log(JSON.stringify(…

Read More
fb:like-box, custom css?

Is it possible to add a custom css file to a fb:like-box? For example, I would like to remove the borders around the iframe. Thanks

Read More
Full screen api HTML5 and Safari (iOS 6)

I'm trying to make an application to run in full screen mode (without the top bar) in Safari for iOS 6. The code is as follows: var elem = document.getElementById("element_id"); if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { …

Read More