Tengo un div arrastrable que funciona muy bien en la computadora, pero hoy revisé la pantalla táctil y supe que no se mueve.
El código JavaScript que tengo usa onmousemove , ¿hay alguna alternativa para eso en la pantalla táctil ?
¿Qué hacer para solucionar esto? Por cierto, me gustaría que esto funcione tanto en pantallas táctiles como en dispositivos de escritorio.
Actualmente lo que tengo:
dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; let parentElement = elmnt.parentElement; if (elmnt.offsetTop < 0) { elmnt.style.top = "0px"; return; } if (elmnt.offsetTop > (parentElement.offsetHeight - elmnt.offsetHeight) - 2) { elmnt.style.top = (parentElement.offsetHeight - elmnt.offsetHeight - 2) + "px"; return; } if (elmnt.offsetLeft < 0) { elmnt.style.left = "0px"; return } if (elmnt.offsetLeft > (parentElement.offsetWidth - elmnt.offsetWidth) - 2) { elmnt.style.left = (parentElement.offsetWidth - elmnt.offsetWidth - 2) + "px"; return; } // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } <div id="wrapper" style="border: 0.1vw solid gray;"> <div id="mydiv"> <img src="https://placekitten.com/200/287"> </div> </div> Eso significa que en lugar de onmousemove , debe usar ontouchmove y ontouchstart , ontouchstart consecuencia. Los eventos táctiles no tienen acceso directo a las propiedades de clientX y clientY , solo puede recuperarlos desde Touch que se puede recuperar de la lista TouchesEvent.touches . Esta lista contiene el número de toques en la pantalla que estaban ocurriendo cuando se invocó a un oyente.
Además, recomendaría agregar oyentes en lugar de asignar controladores, ya que se consideran experimentales para eventos táctiles.
Aquí hay información más detallada sobre cómo usar Touch Events.