DragDropProvider - Dnd Kit

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:

jsx

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:

jsx

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:

jsx

function App() {
  return (
    <div>
      <DragDropProvider>
        <FileList />
      </DragDropProvider>

      <DragDropProvider>
        <TaskList />
      </DragDropProvider>
    </div>
  );
}

Configuration

Customize behavior with plugins, sensors, and modifiers. Each accepts either an array (which replaces the defaults) or a function that receives the defaults.

Extending defaults

Use the function form to add to or configure the defaults without replacing them:

jsx

import {DragDropProvider} from '@dnd-kit/react';
import {Feedback} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';

function App() {
  return (
    <DragDropProvider
      // Add a plugin alongside defaults
      plugins={(defaults) => [
        ...defaults,
        Feedback.configure({ dropAnimation: null }),
      ]}
      // Add a modifier
      modifiers={(defaults) => [...defaults, RestrictToWindow]}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

Replacing defaults

Pass an array to fully replace the defaults:

jsx

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

function App() {
  return (
    <DragDropProvider
      sensors={[
        PointerSensor,
        KeyboardSensor,
      ]}
      plugins={[
        AutoScroller,
        Accessibility,
      ]}
      modifiers={[
        RestrictToWindow,
      ]}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

API Reference

Props

<ParamField path="children" type="ReactNode" required> Content where drag and drop should be enabled. </ParamField> <ParamField path="manager" type="DragDropManager"> Optional custom manager instance. If not provided, one will be created. </ParamField>

Events

<ParamField path="onBeforeDragStart" type="(event: BeforeDragStartEvent, manager: DragDropManager) => void"> Called before dragging starts. Call `event.preventDefault()` to cancel. </ParamField> <ParamField path="onDragStart" type="(event: DragStartEvent, manager: DragDropManager) => void"> Called when dragging begins. </ParamField> <ParamField path="onDragMove" type="(event: DragMoveEvent, manager: DragDropManager) => void"> Called when the dragged element moves. </ParamField> <ParamField path="onDragOver" type="(event: DragOverEvent, manager: DragDropManager) => void"> Called when dragging over a droppable target. Call `event.preventDefault()` to prevent the default behavior of plugins that respond to this event. </ParamField> <ParamField path="onDragEnd" type="(event: DragEndEvent, manager: DragDropManager) => void"> Called when dragging ends, whether dropped on a target or not. </ParamField> <ParamField path="onCollision" type="(event: CollisionEvent, manager: DragDropManager) => void"> Called when collisions are detected. Call `event.preventDefault()` to prevent automatic target selection. </ParamField>

Configuration

<ParamField path="sensors" type="Sensor[] | (defaults: Sensor[]) => Sensor[]"> [Sensors](/extend/sensors) for detecting user input. Pass an array to replace defaults, or a function to extend them. </ParamField> <ParamField path="plugins" type="Plugin[] | (defaults: Plugin[]) => Plugin[]"> [Plugins](/extend/plugins) to extend functionality. Pass an array to replace defaults, or a function to extend them. </ParamField> <ParamField path="modifiers" type="Modifier[] | (defaults: Modifier[]) => Modifier[]"> [Modifiers](/extend/modifiers) to customize drag behavior. Pass an array to replace defaults, or a function to extend them. </ParamField>