apps/docs/concepts/drag-drop-manager.mdx
The DragDropManager is the central orchestrator of the drag and drop system. It coordinates all interactions between draggable and droppable elements.
graph TD
M[Manager]
R[Registry]
E[Events]
I[Entities]
D[Draggable]
Dr[Droppable]
P[Plugins]
S[Sensors]
Mod[Modifiers]
O[Operation]
M -.-> R
R -.-> I
R -.-> P
R -.-> S
R -.-> Mod
S -.-> |Detect input| O
O -.-> |Trigger| E
Mod -.-> |Transform| O
I -.-> Dr
I -.-> D
Create a manager instance to coordinate drag and drop interactions:
import {DragDropManager} from '@dnd-kit/dom';
const manager = new DragDropManager();
The manager comes with sensible defaults, but you can customize its behavior. The plugins, sensors, and modifiers options accept either an array (which replaces the defaults) or a function that receives the default values and returns a new array.
Use the function form to add to or configure the defaults without replacing them:
import {DragDropManager} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';
const manager = new DragDropManager({
// Add a plugin to the defaults
plugins: (defaults) => [...defaults, MyPlugin],
// Configure a default sensor
sensors: (defaults) => [
...defaults,
PointerSensor.configure({
activationConstraints: { distance: 5 },
}),
],
// Add a modifier
modifiers: (defaults) => [...defaults, RestrictToWindow],
});
Pass an array to fully replace the defaults:
import {
DragDropManager,
KeyboardSensor,
PointerSensor,
} from '@dnd-kit/dom';
const manager = new DragDropManager({
sensors: [
PointerSensor, // Handles mouse and touch
KeyboardSensor, // Enables keyboard navigation
],
plugins: [
AutoScroller, // Automatic scrolling during drag
Accessibility, // ARIA attributes management
],
modifiers: [
RestrictToWindow, // Keeps dragged items within window bounds
],
});
**Sensors**
- `PointerSensor`: Handles mouse and touch interactions
- Mouse: Activates immediately on drag handle
- Touch: 250ms delay with 5px movement tolerance
- Other pointers: 200ms delay with 5px distance threshold
- `KeyboardSensor`: Enables keyboard navigation with arrow keys
**Plugins**
- `Accessibility`: Manages ARIA attributes and announcements
- `AutoScroller`: Scrolls containers when dragging near edges
- `Cursor`: Updates cursor appearance during drag
- `Feedback`: Controls visual feedback during drag
- `PreventSelection`: Prevents text selection while dragging
- `ScrollListener`: Monitors scroll events during drag
- `Scroller`: Handles programmatic scrolling
The manager's monitor lets you observe drag and drop events:
// Observe drag start
manager.monitor.addEventListener('beforedragstart', (event) => {
// Optionally prevent dragging
if (shouldPreventDrag(event.operation.source)) {
event.preventDefault();
}
});
// Track movement
manager.monitor.addEventListener('dragmove', (event) => {
const {source, position} = event.operation;
console.log(`Dragging ${source.id} to ${position.current}`);
});
// Detect collisions
manager.monitor.addEventListener('collision', (event) => {
const [firstCollision] = event.collisions;
if (firstCollision) {
console.log(`Colliding with ${firstCollision.id}`);
}
});
// Listen for when dragging ends
manager.monitor.addEventListener('dragend', (event) => {
const {source, target, canceled} = event.operation;
if (!canceled && target) {
console.log(`Dropped ${source.id} onto ${target.id}`);
}
});
The manager's registry tracks draggable and droppable elements:
// Manual registration
const cleanup = manager.registry.register(draggable);
cleanup(); // Or manager.registry.unregister(draggable);
// Auto-registration with manager reference
const draggable = new Draggable({
id: 'draggable-1',
element,
}, manager);
// Opt out of auto-registration
const draggable = new Draggable({
id: 'draggable-1',
element,
register: false
}, manager);
registry: Tracks active elements and extensions
draggables: Map of registered draggable elementsdroppables: Map of registered droppable elementsplugins: Registry of active pluginssensors: Registry of active sensorsmodifiers: Registry of active modifiersdragOperation: Current drag operation state
source: Currently dragged elementtarget: Current drop targetposition: Current drag coordinatesstatus: Current operation statuscanceled: Whether operation was canceledmonitor: Event system
addEventListener: Add event listenerremoveEventListener: Remove listenerrenderer: Integration with asynchronous renderers such as React
Initialization
Registration
Operation
Cleanup