react-draggable

React-Draggable is a React component library for making elements draggable. It is part of the react-grid-layout organization and is published on npm as react-draggable. The library provides two components. `<Draggable>` wraps an existing element and extends it with drag event handlers and styles, moving items via CSS Transforms so they can be dragged regardless of their current positioning. It does not create a wrapper element in the DOM. `<DraggableCore>` is a lower-level option for users who need full control: it provides drag callbacks without managing state or styles and does not set transforms, leaving positioning to the developer. The README points to React-Resizable and React-Grid-Layout as usage examples of DraggableCore. Key props of `<Draggable>` include axis (both, x, y, none), bounds (parent, CSS selector, or left/top/right/bottom object), cancel and handle CSS selectors, grid snapping, position for controlled usage, positionOffset, scale for transformed parents, disabled, and callbacks onStart, onDrag, onStop, and onMouseDown. DraggableData passed to handlers contains node, x, y, deltaX, deltaY, lastX, and lastY. Returning false from onStart cancels the drag. Setting className, style, or transform on `<Draggable>` is an error; those belong on the child element. The README documents compatibility: version 4.x supports React 16.3+, 3.x supports React 15–16, and 2.x supports React 0.14–15. TypeScript types are included. Installation is via npm or yarn, with ES module and CommonJS import examples. A notable section covers nodeRef: passing a nodeRef prop avoids ReactDOM.findDOMNode() deprecation warnings in React Strict Mode, and the README shows how to forward both ref and props for custom components. Another section explains controlled versus uncontrolled usage, showing how to pass a position prop for programmatic repositioning while still using Draggable's state management. The Content Security Policy section explains that react-draggable injects a small style element into the document head on first drag (the enableUserSelectHack behavior, on by default) to prevent text selection while dragging. Under a strict CSP without 'unsafe-inline' in style-src, this is blocked. Three remedies are documented: pass a nonce prop, rely on webpack's __webpack_nonce__ global fallback, or set enableUserSelectHack={false} and add the two selection rules to your own stylesheet. The nonce is read only when the element is first created, and the same element is shared by every Draggable/DraggableCore on the page. The repository includes a demo site, a changelog, CI workflow, and contributing instructions covering yarn dev, yarn test, and a release checklist using make targets. The project is MIT licensed.