​
Overview

The DragDropProvider component creates a context that enables drag and drop interactions for its children. It manages the drag and drop state and coordinates between draggable and droppable elements.

​
Basic Usage

Wrap your application or a section with DragDropProvider:

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

function App() {
  return (
    <DragDropProvider>
      <YourDraggableContent />
    </DragDropProvider>
  );
}

​
Event Handling

Listen to drag and drop events to respond to user interactions:

function App() {
  return (
    <DragDropProvider
      onBeforeDragStart={({source, event}) => {
        // Optionally prevent dragging
        if (shouldPreventDrag(source)) {
          event.preventDefault();
        }
      }}
      onDragStart={({source}) => {
        console.log('Started dragging', source.id);
      }}
      onDragMove={({operation}) => {
        const {position} = operation;
        console.log('Current position:', position);
      }}
      onDragOver={({source, target}) => {
        console.log(`${source.id} is over ${target.id}`);
      }}
      onDragEnd={({source, target}) => {
        if (target) {
          console.log(`Dropped ${source.id} onto ${target.id}`);
        }
      }}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

​
Multiple Contexts

You can create multiple independent drag and drop contexts:

function App() {
  return (
    <div>
      <DragDropProvider>
        <FileList /> {/* Files can only be dropped in this context */}
      </DragDropProvider>

      <DragDropProvider>
        <TaskList /> {/* Tasks can only be dropped in this context */}
      </DragDropProvider>
    </div>
  );
}

​
Configuration

Customize behavior with plugins, sensors, and modifiers:

import {
  DragDropProvider,
  PointerSensor,
  KeyboardSensor,
  RestrictToWindow,
} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider
      // Custom input detection
      sensors={[
        PointerSensor,
        KeyboardSensor,
      ]}
      // Extend functionality
      plugins={[
        AutoScroller,
        Accessibility,
      ]}
      // Modify drag behavior
      modifiers={[
        RestrictToWindow,
      ]}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

​
API Reference

​
Props

​
children
ReactNode
required

Content where drag and drop should be enabled.

​
manager
DragDropManager

Optional custom manager instance. If not provided, one will be created.

​
Events

​
onBeforeDragStart
(event: BeforeDragStartEvent) => void

Called before dragging starts. Call event.preventDefault() to cancel.

​
onDragStart
(event: DragStartEvent) => void

Called when dragging begins.

​
onDragMove
(event: DragMoveEvent) => void

Called when the dragged element moves.

​
onDragOver
(event: DragOverEvent) => void

Called when dragging over a droppable target.

​
onDragEnd
(event: DragEndEvent) => void

Called when dragging ends, whether dropped on a target or not.

​
onCollision
(event: CollisionEvent) => void

Called when collisions are detected. Call event.preventDefault() to prevent automatic target selection.

​
Configuration

​
sensors
Sensor[]

Array of sensors for detecting user input.

​
plugins
Plugin[]

Array of plugins to extend functionality.

​
modifiers
Modifier[]

Array of modifiers to customize drag behavior.

​
Overview

The DragDropProvider component creates a context that enables drag and drop interactions for its children. It manages the drag and drop state and coordinates between draggable and droppable elements.

​
Basic Usage

Wrap your application or a section with DragDropProvider:

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

function App() {
  return (
    <DragDropProvider>
      <YourDraggableContent />
    </DragDropProvider>
  );
}

​
Event Handling

Listen to drag and drop events to respond to user interactions:

function App() {
  return (
    <DragDropProvider
      onBeforeDragStart={({source, event}) => {
        // Optionally prevent dragging
        if (shouldPreventDrag(source)) {
          event.preventDefault();
        }
      }}
      onDragStart={({source}) => {
        console.log('Started dragging', source.id);
      }}
      onDragMove={({operation}) => {
        const {position} = operation;
        console.log('Current position:', position);
      }}
      onDragOver={({source, target}) => {
        console.log(`${source.id} is over ${target.id}`);
      }}
      onDragEnd={({source, target}) => {
        if (target) {
          console.log(`Dropped ${source.id} onto ${target.id}`);
        }
      }}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

​
Multiple Contexts

You can create multiple independent drag and drop contexts:

function App() {
  return (
    <div>
      <DragDropProvider>
        <FileList /> {/* Files can only be dropped in this context */}
      </DragDropProvider>

      <DragDropProvider>
        <TaskList /> {/* Tasks can only be dropped in this context */}
      </DragDropProvider>
    </div>
  );
}

​
Configuration

Customize behavior with plugins, sensors, and modifiers:

import {
  DragDropProvider,
  PointerSensor,
  KeyboardSensor,
  RestrictToWindow,
} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider
      // Custom input detection
      sensors={[
        PointerSensor,
        KeyboardSensor,
      ]}
      // Extend functionality
      plugins={[
        AutoScroller,
        Accessibility,
      ]}
      // Modify drag behavior
      modifiers={[
        RestrictToWindow,
      ]}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

​
API Reference

​
Props

​
children
ReactNode
required

Content where drag and drop should be enabled.

​
manager
DragDropManager

Optional custom manager instance. If not provided, one will be created.

​
Events

​
onBeforeDragStart
(event: BeforeDragStartEvent) => void

Called before dragging starts. Call event.preventDefault() to cancel.

​
onDragStart
(event: DragStartEvent) => void

Called when dragging begins.

​
onDragMove
(event: DragMoveEvent) => void

Called when the dragged element moves.

​
onDragOver
(event: DragOverEvent) => void

Called when dragging over a droppable target.

​
onDragEnd
(event: DragEndEvent) => void

Called when dragging ends, whether dropped on a target or not.

​
onCollision
(event: CollisionEvent) => void

Called when collisions are detected. Call event.preventDefault() to prevent automatic target selection.

​
Configuration

​
sensors
Sensor[]

Array of sensors for detecting user input.

​
plugins
Plugin[]

Array of plugins to extend functionality.

​
modifiers
Modifier[]

Array of modifiers to customize drag behavior.