<!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>