Así que tengo la parte principal de mi funcionalidad de arrastre implementada así:
let dragSpeed = 1; // called on mousemove event function elementDrag(e) { e = e || window.event; e.preventDefault(); // Calculate new cursor position: newX = initialX - e.clientX; newY = initialY - e.clientY; initialX = e.clientX; initialY = e.clientY; const newLeftOffset = elmnt.offsetLeft - newX * dragSpeed; const newTopOffset = elmnt.offsetTop - newY * dragSpeed; if (newLeftOffset < boundaries.left.max && newLeftOffset > boundaries.left.min) { elmnt.style.left = newLeftOffset + "px"; } if (newTopOffset < boundaries.top.max && newTopOffset > boundaries.top.min) { elmnt.style.top = newTopOffset + "px"; } }Ahora esto funciona perfectamente bien para cualquier elemento que quiera hacer arrastrable. El problema es que cuando escalo el elemento principal, comienza a moverse más rápido y por delante del cursor cuando lo arrastro. Escale el elemento principal para emular el acercamiento.
<body> <div id="container"> <div id="myElement"></div> </div> </body> <script> // call drag function on #myElement </script> document.addEventListener("wheel", e => { const container = document.getElementById("container"); // Zoom in if (e.deltaY < 0) { element.style.transform = `scale(${zoomLevel += 0.1})`; } // Zoom out else if (zoomLevel > 1) { element.style.transform = `scale(${zoomLevel -= 0.1})`; } }); Por lo que puedo ver, #myElement sigue moviendo la misma cantidad de píxeles, independientemente de la escala (la distancia recorrida por el cursor), pero se mueve por delante del cursor cuando se escala. ¿Estoy malinterpretando algo aquí? ¿Y hay alguna manera de hacer que se mueva con el cursor cuando se escala?