So, I have this draggable element that I move by using a mousedown event that attaches a mousemove event to the window (I've attached this to the window because if it's just on the element, a quick mouse movement causes the mouse to "escape" the element before it's re-rendered). On mousemove, the parent has its position changed and is therefore re-rendered. The problem is, I have these children with borders and those borders "move about" when moving the element (they start with very little space between the border of the child and the parent, but during movement that space may close on any side and it does that continuously, giving a "funky" feel). This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="outer">
<div id="inner">
1
</div>
<div id="inner">
2
</div>
<div id="inner">
3
</div>
</div>
</body>
<script src="./try.js" ></script>
</html>
This is my code:
const div = document.getElementById("outer");
function setPosition(positionArg) {
console.log(positionArg)
position = positionArg;
div.style.top = positionArg.top+"px";
console.log(div.style.top)
div.style.left = positionArg.left+"px";
}
div.style.top = 0;
div.style.left = 0;
let position = {top: 0, left: 0};
div.addEventListener("mousedown", e=>{
const offset = {};
const [xOffset, yOffset] = [e.screenX - position.left, e.screenY - position.top];
offset.left = xOffset;
offset.top = yOffset;
const onMouseMove = e=>{
const { screenX, screenY } = e;
setPosition(
{ left: screenX - offset.left, top: screenY - offset.top }
);
};
const onMouseUp = e => {
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
};
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
});
And css:
#outer {
border: solid medium blue;
width: 400px;
height: 400px;
position: fixed;
}
#inner {
border: solid medium blue;
}