react-draggable

Wrap an element with <Draggable> to make it movable. To avoid React Strict Mode warnings, always use the nodeRef prop and pass it to the child element.

import React, { useRef } from 'react';
import Draggable from 'react-draggable';

function App() {
  const nodeRef = useRef(null);

  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>Drag me!</div
    </Draggable>
  );
}

Import the components using ES Modules or CommonJS depending on your project configuration.

// ES Modules
import Draggable from 'react-draggable';
import { DraggableCore } from 'react-draggable';

// CommonJS
const Draggable = require('react-draggable');
const { DraggableCore } = require('react-draggable');

To avoid ReactDOM.findDOMNode() deprecation warnings in React Strict Mode, pass a nodeRef prop to <Draggable> and attach the same ref to the child element. For custom components, ensure you use forwardRef to pass the ref down.

// For custom components
const MyComponent = forwardRef((props, ref) => (
  <div {...props} ref={ref}>Draggable content</div
));

function App() {
  const nodeRef = useRef(null);

  return (
    <Draggable nodeRef={nodeRef}>
      <MyComponent ref={nodeRef} />
    </Draggable>
  );
}

Install the package using npm or yarn to add draggable functionality to your React elements.

npm install react-draggable
# or
yarn add react-draggable

In React 19 and later, ReactDOM.findDOMNode() is no longer available. To ensure <DraggableCore> works correctly and to avoid console warnings, you must pass a nodeRef that points to the actual child DOM node.

function MyComponent() {
  const nodeRef = React.useRef(null);
  return (
    <DraggableCore nodeRef={nodeRef}>
      <div ref={nodeRef}>Example Target</div>
    </DraggableCore>
  );
}

By default, react-draggable injects a <style> element to prevent text selection during drags. If your CSP forbids 'unsafe-inline', you have three options:

1. Pass a nonce: Provide the same nonce used in your CSP header to the nonce prop.
2. Use Webpack: If no nonce is provided, the library falls back to Webpack's __webpack_nonce__ global.
3. Opt out: Set enableUserSelectHack={false} and manually add selection rules to your own CSP-compliant stylesheet.

// Option 1: Pass a nonce
<Draggable nonce={cspNonce}>
  <div>Drag me</div
</Draggable>

While <Draggable> manages its own state, you can implement a controlled pattern by passing the position prop. This allows you to reset or move the element via external state.

function ControlledDraggable() {
  const nodeRef = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDrag = (e, data) => {
    setPosition({ x: data.x, y: data.y });
  };

  const resetPosition = () => setPosition({ x: 0, y: 0 });

  return (
    <>
      <button onClick={resetPosition}>Reset</button>
      <Draggable nodeRef={nodeRef} position={position} onDrag={handleDrag}>
        <div ref={nodeRef}>Drag me or reset!</div
      </Draggable>
    </>
  );
}

The <Draggable> component wraps an existing element and extends it with event handlers and styles using CSS Transforms. It does not create a wrapper element in the DOM.

Note: Do not set className, style, or transform on the <Draggable> component itself; set them on the child element instead. If the child already has a CSS Transform, wrap it in an intermediate <span>.

<DraggableCore> is an advanced component for users who need more control than the standard <Draggable> component provides. It maintains minimal internal state, making it suitable for integration with libraries that require fine-grained control over the draggable element.

Note: <DraggableCore> requires exactly one child element. It clones this child and injects necessary event handlers.