Enable drag and drop interactions in your React application.
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.
Wrap your application or a section with DragDropProvider
:
Listen to drag and drop events to respond to user interactions:
You can create multiple independent drag and drop contexts:
Customize behavior with plugins, sensors, and modifiers:
Content where drag and drop should be enabled.
Optional custom manager instance. If not provided, one will be created.
Called before dragging starts. Call event.preventDefault()
to cancel.
Called when dragging begins.
Called when the dragged element moves.
Called when dragging over a droppable target.
Called when dragging ends, whether dropped on a target or not.
Called when collisions are detected. Call event.preventDefault()
to prevent automatic target selection.
Enable drag and drop interactions in your React application.
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.
Wrap your application or a section with DragDropProvider
:
Listen to drag and drop events to respond to user interactions:
You can create multiple independent drag and drop contexts:
Customize behavior with plugins, sensors, and modifiers:
Content where drag and drop should be enabled.
Optional custom manager instance. If not provided, one will be created.
Called before dragging starts. Call event.preventDefault()
to cancel.
Called when dragging begins.
Called when the dragged element moves.
Called when dragging over a droppable target.
Called when dragging ends, whether dropped on a target or not.
Called when collisions are detected. Call event.preventDefault()
to prevent automatic target selection.