I’ve been searching for a clear guide on how these events work and now I’m more confused than when I started.
Certain features of my site involve drag-and-drop. Currently mobile devices (or anything without a mouse) are supported by having the user select the item, tap the “move” button, then touch the drop point. While this works quite well (items are on a visible grid), it’s not exactly as user-friendly as dragging.
My initial understanding is that, wherever I assign element.onmousedown, element.onmousemove and element.onmouseup I can simply also assign the same handler to element.ontouchstart, element.ontouchmove and element.ontouchend respectively.
However, that leaves the following questions:
- How do I get the coordinates of the touch point, and what is it relative to?
- Will the view be panned (the default action of dragging) and if so is that cancellable?
- How can I avoid interfering with multi-touch actions such as pinching to zoom if one finger happens to be on a draggable element?
You can determine coordinates by measuring device width/height (window.innerHeight/window.innerWidth).
This article is a good starting point for touch events and overriding them:
http://www.html5rocks.com/en/mobile/touch/
Multi-touch gestures shouldn’t interfere with the draggable elements. You can use conditionals in your event handlers if they are interfering:
(event handler)
if (event.touches === 1) handle the event