The DragDropProvider component is a context provider that enables drag and drop interactions within its subtree.

​
Usage

​
Location

  • Wrap your application with the DragDropProvider component to enable drag and drop interactions across the entire application.

    import {DragDropProvider} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider>
      {/* Your application */}
    </DragDropProvider>
  );
}

  • If you want to limit drag and drop interactions to a specific subtree, you can wrap only that subtree with the DragDropProvider component.

  • You can use the DragDropProvider component multiple times within your application to create separate drag and drop contexts.

    import {DragDropProvider} from '@dnd-kit/react';

function App() {
  return (
    <div>
      <DragDropProvider>
        {/* Your first drag and drop context */}
      </DragDropProvider>
      <DragDropProvider>
        {/* Your second drag and drop context */}
      </DragDropProvider>
    </div>
  );
}

  • You can also nest DragDropProvider components to create a hierarchy of drag and drop contexts.

    import {DragDropProvider} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider>
      <div>
        <DragDropProvider>
          {/* Your draggable and droppable elements */}
        </DragDropProvider>
      </div>
    </DragDropProvider>
  );
}

​
Listening to drag and drop events

You can use the onDragStart, onDragMove, onDragOver and onDragEnd event listeners to respond to drag and drop events within the subtree of the DragDropProvider component.

import {DragDropProvider} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider
      onDragStart={(event) => {
        console.log('Drag started:', event.source);
      }}
      onDragMove={(event) => {
        console.log('Drag moved:', event.operation.position);
      }}
      onDragOver={(event) => {
        console.log('Drag over target:', event.target);
      }}
      onDragEnd={(event) => {
        console.log('Drag ended:', event.source, event.target);
      }}
    >
      {/* Your draggable and droppable elements */}
    </DragDropProvider>
  );
}

​
API Reference

​
Props

onBeforeDragStart
(event: BeforeDragStartEvent) => void

A callback that is called before a drag operation starts. Can be used to prevent the drag operation from starting by invoking event.preventDefault().

onDragStart
(event: DragStartEvent) => void

A callback that is called when a drag operation starts.

onDragMove
(event: DragMoveEvent) => void

A callback that is called when a draggable element is moved.

onCollision
(event: CollisionEvent) => void

A callback that is called when new collisions are detected between the draggable source and droppable targets. Invoke event.preventDefault() to prevent the first collision from being set as the target of the drag operation.

onDragOver
(event: DragOverEvent) => void

A callback that is called when a draggable element is dragged over a droppable target.

onDragEnd
(event: DragEndEvent) => void

A callback that is called when a drag operation ends.

children
ReactNode

The children of the DragDropProvider component.

manager
DragDropManager

An instance of the DragDropManager class that is used to manage the drag and drop interactions within the subtree of the DragDropProvider component.

plugins
Plugin[]

An array of plugins that can be used to extend the functionality of the drag and drop manager.

sensors
Sensor[]

An array of sensors that can be used to detect user input in the browser.

modifiers
Modifier[]

An array of modifiers that can be used to modify or restrict the behavior of draggable and droppable elements.

QuickstartuseDraggable