Entonces, lo que estoy tratando de hacer es crear un elemento div arrastrable que se pueda mover a cualquier parte de una página, pero por mi vida, parece que no puedo entender por qué está "perdiendo control" cuando acelera el mouse.

Al principio quería usar React DnD pero quiero entender qué está pasando y por qué no funciona.

El código básicamente se reduce a esto:

 const callOverlayControlRef = useRef(null); let offsetX; let offsetY; const handleUpdateElementPosition = (e) => { callOverlayControlRef.current.style.left = `${e.clientX - offsetX}px`; callOverlayControlRef.current.style.top = `${e.clientY - offsetY}px`; }; const handleMoveOverlayControl = (e) => { offsetX = e.clientX - callOverlayControlRef.current?.getBoundingClientRect().left; offsetY = e.clientY - callOverlayControlRef.current?.getBoundingClientRect().top; callOverlayControlRef.current?.addEventListener('mousemove', handleUpdateElementPosition); }; const handleClearHandlers = useCallback(() => { callOverlayControlRef.current?.removeEventListener('mousemove', handleUpdateElementPosition); }, []); return ( <div ref={callOverlayControlRef}> <span onMouseDown={handleMoveOverlayControl} onMouseOut={handleClearHandlers} onBlur={handleClearHandlers} /> </div> )

Entonces, con el mouse hacia abajo en el span desde el div , estoy tratando de mover el div . Funciona bien si mueves el ratón lentamente, pero si empiezas a moverte más rápido si se te escapa.

¿Por qué está pasando eso? ¿Y cuál sería una mejor manera de hacer esto?