drag-and-drop on touchscreen

Question

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?

Answer 1

The other answers better address the original question, but for posterity who, like me, find this link trying to make an existing click/drag (mouse) function work on touch screens, this is a very bare bones solution.

If you're adding event listeners, you can add a corresponding 'touchstart' line to your 'mousedown' like so:

 document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
 document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);

Do the same for any mousemove (touchmove) and mouseup (touchend).

Within your functions, when you get the mouse coordinates, use:

  var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value

That way it checks for a mouse click and drag first, then if that's undefined, it looks for a touch interaction.

Like I said, very barebones, but it worked to get me started.

Answer 2

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