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
Content where drag and drop should be enabled.
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
Array of sensors for detecting user input.
Array of plugins to extend functionality.
Array of modifiers to customize drag behavior.
