Estoy tratando de implementar un simple arrastre para mi proyecto de interfaz. A continuación se muestra el ejemplo de trabajo mínimo. En esencia, configuro position: relative para poder controlar la posición del elemento a través style.left y style.top , y uso MouseEvent.movementX y MouseEvent.movementY para actualizar la posición de acuerdo con los movimientos del cursor.
<!DOCTYPE html> <head> <title>Drag-n-drop</title> <style> .dragme { position: relative; width: 100px; height: 100px; background-color: grey; } </style> </head> <body> <div class="dragme"></div> <script> const box = document.querySelector(".dragme"); box.addEventListener("mousedown", dragStart); window.addEventListener("mouseup", dragStop); function dragStart(event) { window.addEventListener("mousemove", dragging); } function dragging(event) { const style = window.getComputedStyle(box); box.style.left = `calc(${style.left} + ${event.movementX}px)`; box.style.top = `calc(${style.top} + ${event.movementY}px)`; } function dragStop(event) { window.removeEventListener("mousemove", dragging); } </script> </body> </html> El problema es que este enfoque funciona según lo previsto en Firefox, pero en Chrome y Edge, el elemento arrastrado se mueve más rápido que el cursor. Después de investigar un poco, me di cuenta de que el origen del problema es la pantalla de alto DPI. Reemplazar event.movementX por event.movementX / window.devicePixelRatio etc. hace que Chrome y Edge realicen el arrastre sin problemas, pero Firefox no.
La única solución de navegador cruzado que se me ocurrió es usar MouseEvent.screenX y MouseEvent.screenY en su lugar y estoy perfectamente bien con eso. Sin embargo, todavía tengo curiosidad, ¿hay alguna forma de poder usar MouseEvent.movementX y MouseEvent.movementY en diferentes navegadores?