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?

Answer 1

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 move an element 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: http://developer.apple.com/safari/library/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html#//apple_ref/javascript/cl/TouchEvent

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

Good luck