react-draggable

React-Draggable es una biblioteca de componentes React para hacer elementos arrastrables. Forma parte de la organización react-grid-layout y se publica en npm como react-draggable. La biblioteca proporciona dos componentes. `<Draggable>` envuelve un elemento existente y lo extiende con manejadores de eventos de arrastre y estilos, moviendo elementos mediante Transformaciones CSS para que puedan arrastrarse independientemente de su posicionamiento actual. No crea un elemento envoltorio en el DOM. `<DraggableCore>` es una opción de bajo nivel para usuarios que necesitan control total: proporciona callbacks de arrastre sin gestionar estado ni estilos y no establece transformaciones, dejando el posicionamiento al desarrollador. El README señala a React-Resizable y React-Grid-Layout como ejemplos de uso de DraggableCore. Las props clave de `<Draggable>` incluyen axis (both, x, y, none), bounds (parent, selector CSS, u objeto left/top/right/bottom), selectores CSS cancel y handle, ajuste a cuadrícula, position para uso controlado, positionOffset, scale para padres transformados, disabled, y callbacks onStart, onDrag, onStop y onMouseDown. DraggableData pasado a los manejadores contiene node, x, y, deltaX, deltaY, lastX y lastY. Devolver false desde onStart cancela el arrastre. Establecer className, style o transform en `<Draggable>` es un error; esos pertenecen al elemento hijo. El README documenta compatibilidad: la versión 4.x soporta React 16.3+, la 3.x soporta React 15–16, y la 2.x soporta React 0.14–15. Se incluyen tipos TypeScript. La instalación es mediante npm o yarn, con ejemplos de importación de módulo ES y CommonJS. Una sección notable cubre nodeRef: pasar una prop nodeRef evita advertencias de deprecación de ReactDOM.findDOMNode() en el Modo Estricto de React, y el README muestra cómo reenviar tanto ref como props para componentes personalizados. Otra sección explica el uso controlado versus no controlado, mostrando cómo pasar una prop position para reposicionamiento programático mientras se sigue usando la gestión de estado de Draggable. La sección de Política de Seguridad de Contenido explica que react-draggable inyecta un pequeño elemento de estilo en la cabecera del documento en el primer arrastre (el comportamiento enableUserSelectHack, activado por defecto) para prevenir la selección de texto durante el arrastre. Bajo una CSP estricta sin 'unsafe-inline' en style-src, esto se bloquea. Se documentan tres remedios: pasar una prop nonce, depender del fallback global __webpack_nonce__ de webpack, o establecer enableUserSelectHack={false} y añadir las dos reglas de selección a tu propia hoja de estilos. El nonce se lee solo cuando el elemento se crea por primera vez, y el mismo elemento se comparte entre cada Draggable/DraggableCore en la página. El repositorio incluye un sitio de demostración, un changelog, flujo de trabajo CI e instrucciones de contribución que cubren yarn dev, yarn test y una lista de verificación de lanzamiento usando objetivos make. El proyecto tiene licencia MIT.