<!DOCTYPE html>
<html>

<head>
  <title>Drag-and-drop test</title>
  <style>
    #drop {
      width: 5em;
      height: 5em;
      border: 1px solid black;
      position: absolute;
      top: 30px;
      left: 0px;
    }

    #drag {
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <div id="touch" draggable="true">touch me</div>
  <script>
    window.result = [];
    function log(...args) {
      console.log.apply(console, args);
      result.push(args.join(' '));
    }
    window.didTouchStart = false;
    window.didDragEnter = false;
    window.didTouchMove = false;
    window.didTouchEnd = false;
    const drag = document.getElementById('touch');
    drag.addEventListener('touchstart', function (event) {
      console.log("touchstart")
      window.didTouchStart = true;
    });
    drag.addEventListener('touchmove', function (event) {
      event.preventDefault();
      log('Touchmove:', ...Array.from(event.changedTouches).map(touch => "x: "+ Math.round(touch.clientX) +" y: "+ Math.round(touch.clientY)));
      window.didTouchMove = true;
      var touchLocation = event.targetTouches[0];
      var moveLoction = event.changedTouches[0];
      drag.style.left = touchLocation.pageX + 'px';
      drag.style.top = touchLocation.pageY + 'px';
    });
    drag.addEventListener('touchend', function (event) {
      console.log("touch end")
      log('Touchend:', ...Array.from(event.changedTouches).map(touch => touch.identifier));
      if(Array.from(event.changedTouches).map((touch) => {
        console.log("x: "+ Math.round(touch.clientX) +" y: "+ Math.round(touch.clientY))
        window.touchX = touch.clientX;
        window.touchY = touch.clientY;
      }))
      event.preventDefault();
      window.didTouchEnd = true;

    });
  </script>
</body>

</html>
