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?