blob: 212330d46c77fac8a6266a920535d56ee7f24878 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!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>
|
