Move an element using touch events.

dragdrop1.js

function draggable(element) {
  let currentX = 0;
  let currentY = 0;

  element.addEventListener('touchstart', (startEvent) => {
    const firstTouch = startEvent.touches[0];
    let deltaX, deltaY;

    const onMove = (moveEvent) => {
      // prevent the scrolling
      moveEvent.preventDefault();
      let moveTouch = moveEvent.touches[0];
      // calculate new position
      deltaX = moveTouch.clientX - firstTouch.clientX + currentX;
      deltaY = moveTouch.clientY - firstTouch.clientY + currentY;
      element.style.webkitTransform = 
            element.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
    }

    const onEnd = () => {
      // store the current position
      currentX = deltaX;
      currentY = deltaY;
      // remove all listeners
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onEnd);
      document.removeEventListener('touchcancel', onEnd);
    }

    document.addEventListener('touchmove', onMove);
    document.addEventListener('touchend', onEnd);
    document.addEventListener('touchcancel', onEnd);
  });
}