HTML5 Drag and Drop API on Touch Screen Devices

Question

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?

I'd recommend changing the title to fully spell out 'Drag & Drop'. People might think you mean 'Dungeons & Dragons'. — Andy Ford, Aug 01 '10 at 16:41
Haha, so true, I don't even know why I abbreviated that, thanks! — Qcom, Aug 01 '10 at 21:11
I'm not sure how Sencha touch works exactly. But I do believe it uses HTML5 to enable touch: http://www.sencha.com/products/touch/ — Wolph, Aug 01 '10 at 21:17
Yeah, thanks, I actually forgot about that. I had just recently seen it, but it would be nice to figure out how they implement it with only HTML, CSS & JS.. — Qcom, Aug 02 '10 at 20:51

score 8 · Answer 1 · edited Apr 08 '21 at 03:12

8

There are some native HTML5 Events that works in WebKit (Chrome & Safari) ... only mobile versions. The name of these events are touchstart, touchmove, touchend, touchcancel

An example to reposition an element with touch is:

$(document).bind("touchstart", function(e) {
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;

$("#element").css({top: y, left: x});
});

More information: https://developer.apple.com/documentation/webkitjs/touchevent

BTW I prefer to work with webkit-transform (CSS properties) 'cause it has a better performance.

edited Apr 08 '21 at 03:12

Zectbumo

4,128
1
31
26

answered Aug 30 '10 at 19:21

coto

2,255
1
19
32

2

While this is useful information, it doesn't really answer the question at hand. Using touch events would be a work around. – freakTheMighty Jan 01 '11 at 19:35
1

Using WebKit (Chromium 57) on Kubuntu 16.10 on a laptop with touch screen, and the events are generated. Touch Events are not generated by mobile versions only. – Christian Hujer Apr 12 '17 at 04:33
@ChristianHujer Can't confirm for Google Chrome. – phk Jul 12 '17 at 11:59

score 7 · Answer 2 · answered Nov 21 '11 at 03:11

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.

Isn't *every single thing* on touch devices based on the notion of **dragging?** You literally have to drag a slider before you can even start to use your phone/tablet (slide to unlock). All the problems you talked about are solved. The only issue comes when you're trying to drag an element inside a scrollable area: is the user trying to scroll or to drag? Only in that case you might not be able to use a "draggable" — unless you limit/lock the scroll (e.g. only scroll on Y-axis, drag on X-axis) — fregante, Nov 22 '13 at 01:26

score 3 · Answer 3 · edited May 07 '18 at 15:27

3

Having the same problem, here are a couple of free solutions:

http://touchpunch.furf.com/

https://www.createjs.com/demos/easeljs/draganddrop

edited May 07 '18 at 15:27

Cœur

37,241
25
195
267

answered May 31 '13 at 20:12

roman m

26,012
31
101
133

HTML5 Drag and Drop API on Touch Screen Devices

3 Answers3

Linked