66 lines
1.8 KiB
HTML
66 lines
1.8 KiB
HTML
|
<!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>
|