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?