A continuación se muestra el código (no muy elegante o completo, pero funciona) para la funcionalidad de arrastrar en la versión 17 de React. Arrastrar el elemento funciona de izquierda a derecha, pero no de derecha a izquierda. ¿Alguien puede informar sobre el problema o si falta algo?

 import React, { useState, useEffect } from "react"; const Draggables = (props) => { const [dragging, setDragging] = useState(false); const [pos, setPos] = useState({ x: 0, y: 0 }); useEffect(() => { if (dragging) { document.addEventListener("mousemove", { onMouseMove }); document.addEventListener("mouseup", { onMouseUp }); } else if (!dragging) { document.removeEventListener("mousemove", { onMouseMove }); document.removeEventListener("mouseup", { onMouseUp }); } }, [dragging]); const mouseDown = (e) => { // only left mouse button if (e.button !== 0) return; setDragging(true); e.stopPropagation(); e.preventDefault(); }; const onMouseUp = (e) => { setDragging(false); e.stopPropagation(); e.preventDefault(); }; const onMouseMove = (e) => { if (!dragging) return; setPos({ x: e.pageX, }); e.stopPropagation(); e.preventDefault(); }; return ( <div className="draggable" onMouseDown={mouseDown} onMouseMove={onMouseMove} onMouseUp={onMouseUp} style={{ position: "absolute", left: `${pos.x}px`, top: 50 + "px", }} > D </div> ); }; export default Draggables;

A continuación se muestra el CSS correspondiente.

 .draggable { cursor: pointer; width: 4px; height: 4px; border-radius: 50px; background-color: blue; }

Gracias