I want the orange rectangle to be draggable using mouse or touch. The function for the mouse is working for me, so I tried copying it and replacing mousedown with ontouchstart, mousemove with ontouchmove and mouseup with ontouchend but it doesn’t seem to move. Any suggestions? Thanks!
JavaScript
x
42
42
1
var move = document.querySelector('.move');2
3
move.addEventListener('mousedown', mousedown);4
move.addEventListener('ontouchstart', ontouchstart);5
6
function mousedown() {7
8
move.addEventListener('mousemove', mousemove); 9
move.addEventListener('mouseup', mouseup); 10
function mousemove(e){11
12
var x = e.clientX - 100 + 'px';13
var y = e.clientY - 100 + 'px'; 14
this.style.left = x;15
this.style.top = y;16
17
}18
19
function mouseup() {20
move.removeEventListener('mousemove', mousemove)21
}22
23
}24
25
function ontouchstart() {26
27
move.addEventListener('ontouchmove', ontouchmove); 28
move.addEventListener('ontouchend', ontouchend);29
function ontouchmove(e){30
31
var x = e.clientX - 100 + 'px';32
var y = e.clientY - 100 + 'px'; 33
this.style.left = x;34
this.style.top = y;35
36
}37
38
function ontouchend() {39
move.removeEventListener('ontouchmove', ontouchmove)40
}41
42
}JavaScript
1
6
1
.move {2
height: 200px;3
width: 200px;4
background: orange;5
position: fixed;6
}JavaScript
1
5
1
<body>2
<div class="move"></div>3
4
<script src="script.js"></script>5
</body>Advertisement
Answer
For one, the names of your events are incorrect. Omit the on prefix.
Second, touchmove works a little different from mousemove. The event parameter that gets passed to touchmove does not have a clientX or clientY property. Instead it contains a TouchList that needs to be iterated. See below:
JavaScript
1
47
47
1
var move = document.querySelector('.move');2
3
move.addEventListener('mousedown', mousedown);4
move.addEventListener('touchstart', ontouchstart);5
6
function mousedown() {7
8
move.addEventListener('mousemove', mousemove);9
move.addEventListener('mouseup', mouseup);10
11
function mousemove(e) {12
13
var x = e.clientX - 100 + 'px';14
var y = e.clientY - 100 + 'px';15
this.style.left = x;16
this.style.top = y;17
18
}19
20
function mouseup() {21
move.removeEventListener('mousemove', mousemove)22
}23
24
}25
26
function ontouchstart() {27
28
move.addEventListener('touchmove', ontouchmove);29
move.addEventListener('touchend', ontouchend);30
31
function ontouchmove(e) {32
33
e.preventDefault();34
for (target of e.targetTouches) {35
var x = target.clientX - 100 + "px";36
var y = target.clientY - 100 + "px";37
this.style.left = x;38
this.style.top = y;39
}40
41
}42
43
function ontouchend() {44
move.removeEventListener('touchmove', ontouchmove)45
}46
47
}JavaScript
1
6
1
.move {2
height: 200px;3
width: 200px;4
background: orange;5
position: fixed;6
}JavaScript
1
5
1
<body>2
<div class="move"></div>3
4
<script src="script.js"></script>5
</body>For more information see Touch Events and Using Touch Events.