So I have the main part of my dragging functionality implemented like this:
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";
}
}
Now this works perfectly fine for any element I want to make draggable. The problem is that when I scale the parent element, it starts moving faster and ahead of the cursor when I drag it. I scale the parent element to emulate zooming in.
<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})`;
}
});
As far as I can see, #myElement is still moving the same amount of pixels regardless of the scale (the distance moved by the cursor), yet it moves ahead of the cursor when scaled. Am I misunderstanding something here? And is there a way to get it to move with the cursor when scaled?