html5 drag api,html - HTML5 Drag and Drop API on Touch Screen Devices - Stack Overflow

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.