Quiero que el rectángulo naranja se pueda arrastrar con el mouse o el tacto. La función para el mouse funciona para mí, así que intenté copiarla y reemplazar mousedown con ontouchstart, mousemove con ontouchmove y mouseup con ontouchend, pero parece que no se mueve. ¿Alguna sugerencia? ¡Gracias!
var move = document.querySelector('.move'); move.addEventListener('mousedown', mousedown); move.addEventListener('ontouchstart', ontouchstart); function mousedown() { move.addEventListener('mousemove', mousemove); move.addEventListener('mouseup', mouseup); function mousemove(e){ var x = e.clientX - 100 + 'px'; var y = e.clientY - 100 + 'px'; this.style.left = x; this.style.top = y; } function mouseup() { move.removeEventListener('mousemove', mousemove) } } function ontouchstart() { move.addEventListener('ontouchmove', ontouchmove); move.addEventListener('ontouchend', ontouchend); function ontouchmove(e){ var x = e.clientX - 100 + 'px'; var y = e.clientY - 100 + 'px'; this.style.left = x; this.style.top = y; } function ontouchend() { move.removeEventListener('ontouchmove', ontouchmove) } } .move { height: 200px; width: 200px; background: orange; position: fixed; } <body> <div class="move"></div> <script src="script.js"></script> </body>Por un lado, los nombres de sus eventos son incorrectos. Omita el prefijo on .
En segundo lugar, touchmove funciona un poco diferente a mousemove . El parámetro de evento que se pasa a touchmove no tiene una propiedad clientX o clientY . En su lugar, contiene una TouchList que debe repetirse. Vea abajo:
var move = document.querySelector('.move'); move.addEventListener('mousedown', mousedown); move.addEventListener('touchstart', ontouchstart); function mousedown() { move.addEventListener('mousemove', mousemove); move.addEventListener('mouseup', mouseup); function mousemove(e) { var x = e.clientX - 100 + 'px'; var y = e.clientY - 100 + 'px'; this.style.left = x; this.style.top = y; } function mouseup() { move.removeEventListener('mousemove', mousemove) } } function ontouchstart() { move.addEventListener('touchmove', ontouchmove); move.addEventListener('touchend', ontouchend); function ontouchmove(e) { e.preventDefault(); for (target of e.targetTouches) { var x = target.clientX - 100 + "px"; var y = target.clientY - 100 + "px"; this.style.left = x; this.style.top = y; } } function ontouchend() { move.removeEventListener('touchmove', ontouchmove) } } .move { height: 200px; width: 200px; background: orange; position: fixed; } <body> <div class="move"></div> <script src="script.js"></script> </body>Para obtener más información, consulte Eventos táctiles y Uso de eventos táctiles .