Entonces, tengo este elemento arrastrable que muevo usando un evento mousedown que adjunta un evento mousemove a la ventana (he adjuntado esto a la ventana porque si está solo en el elemento, un movimiento rápido del mouse hace que el mouse "escape " el elemento antes de que se vuelva a renderizar). Al mover el mouse, el padre cambia de posición y, por lo tanto, se vuelve a renderizar. El problema es que tengo estos elementos secundarios con bordes y esos bordes "se mueven" al mover el elemento (comienzan con muy poco espacio entre el borde del elemento secundario y el principal, pero durante el movimiento ese espacio puede cerrarse en cualquier lado y hace eso continuamente, dando una sensación "funky"). Este es mi 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>Este es mi código:
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); });Y CSS:
#outer { border: solid medium blue; width: 400px; height: 400px; position: fixed; } #inner { border: solid medium blue; }