34

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?

4
  • 10
    I'd recommend changing the title to fully spell out 'Drag & Drop'. People might think you mean 'Dungeons & Dragons'.
    – Andy Ford
    Aug 1, 2010 at 16:41
  • 1
    Haha, so true, I don't even know why I abbreviated that, thanks!
    – Qcom
    Aug 1, 2010 at 21:11
  • 1
    I'm not sure how Sencha touch works exactly. But I do believe it uses HTML5 to enable touch: sencha.com/products/touch
    – Wolph
    Aug 1, 2010 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 2, 2010 at 20:51

3 Answers 3

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.

3
  • 2
    While this is useful information, it doesn't really answer the question at hand. Using touch events would be a work around. Jan 1, 2011 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. Apr 12, 2017 at 4:33
  • @ChristianHujer Can't confirm for Google Chrome.
    – phk
    Jul 12, 2017 at 11:59
7

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.

2
  • 15
    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, 2013 at 1:26
  • 1
    This does not even address the problem at hand. Sep 8, 2020 at 12:27
3

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

http://touchpunch.furf.com/

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.