0

So I recently found out that native drag and drop was actually introduced by IE5 (I had previously thought it was a more recent addition and only in IE9... couldn't have been more wrong!)

Anyway, I've implemented drag and drop over a set of elements, but I quickly found that mobile devices don't appear to support the Drag and Drop events.

I don't really know much about the Touch events, and what I could find about them was very confusing.

Is it possible that I'm just doing something wrong with Drag and Drop, or can someone point me to an understandable introduction to Touch events?

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592

2 Answers2

3

I understand you don't prefer to use jQuery. The resources below might help you to handle Touch event without using jQuery.

1. W3C

http://www.w3.org/TR/touch-events/#dfn-touch-point

The W3C has published the Candidate Recommendation "Touch Events version 1" on 15 December 2011. In this recommendations 4 types of touch events are mentioned.

touchstart event
touchend event
touchmove event
touchcancel event

2. Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/DOM/Touch_events

On the Mozilla Developer Network, you can see the definitions of "Touch events" and the example codes to handle touch events.

function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleLeave, false);
  el.addEventListener("touchmove", handleMove, false);
}

3. iOS Developer Library

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

Apple's document might help you to know the "Supported Events" on iOS.

4. On HTML5 ROCKS TUTORIALS

http://www.html5rocks.com/en/mobile/touch/

The article "MULTI-TOUCH WEB DEVELOPMENT" shows a useful example code without jQuery.

Ry-
  • 218,210
  • 55
  • 464
  • 476
naota
  • 4,695
  • 1
  • 18
  • 21
  • Thank you for the links. I guess my main question now is how do I tell the difference between "touchstart/touchend" and "click"? – Niet the Dark Absol Dec 12 '12 at 21:16
  • Sure, I agree with you. Telling the difference between "touchstart/touchend" and "click" on multiple browsers/devices is a complicated matter. I recommend you to take a look at a blog page of Boris Smub, a author of the 'pointer.js'. http://smus.com/mouse-touch-pointer/ – naota Dec 14 '12 at 04:31
0

jQuery could be a great solution for this How to use jQuery Mobile for its touch event support only (no UI enhancements)? It's better to manage touch events with a js UI library rather than the basic event system.

Community
  • 1
  • 1
jawerty
  • 155
  • 1
  • 2
  • 9
  • Hmm... trouble is, I am against the use of jQuery. I firmly believe that, unless you are using *every single feature* that jQuery has to offer, then jQuery is wasteful. Particularly on mobile devices. I tried Mobile jQuery once, and it took ten seconds to download the page and a further twenty to execute the file. Since this question is specifically trying to make the site work on touch devices (which is mostly phones) I don't think jQuery is a suitable answer. – Niet the Dark Absol Dec 12 '12 at 05:47
  • If you refuse to use jquery then dont complain when you cant figure out how to do things without jquery. Also, jquery mobile is not the mobile version of jquery. It's more of a ui framework similar to bootstrap, not a library like regular jquery. Just use regular jquery, and if regular jquery is still too clunky for you, try zepto. – Owen Masback Aug 06 '13 at 18:34
  • jQuery mobile is good for mobile applications that they do not care about performance. – redV Jan 07 '14 at 07:13