The DragDropManager
is the central orchestrator of the drag and drop system. It coordinates all interactions between draggable and droppable elements.
Usage
Create a manager instance to coordinate drag and drop interactions:
import {DragDropManager} from '@dnd-kit/dom';
const manager = new DragDropManager();
Optional configuration for the manager:
sensors
: Array of sensors to detect drag interactions
plugins
: Array of plugins to extend functionality
modifiers
: Array of modifiers to customize behavior
Configuration
The manager comes with sensible defaults, but you can customize its behavior:
import {
DragDropManager,
KeyboardSensor,
PointerSensor,
} from '@dnd-kit/dom';
const manager = new DragDropManager({
// Sensors detect drag interactions
sensors: [
PointerSensor, // Handles mouse and touch
KeyboardSensor, // Enables keyboard navigation
],
// Plugins extend functionality
plugins: [
AutoScroller, // Automatic scrolling during drag
Accessibility, // ARIA attributes management
],
// Modifiers customize drag behavior
modifiers: [
restrictToWindow, // Keeps dragged items within window bounds
],
});
Events
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}`);
}
});
Available Events
Fires before drag begins. Can be prevented.
The drag operation that is about to begin
Call to prevent the drag operation from starting
Fires when drag starts.
The current drag operation
The original browser event that triggered the drag
Fires during movement. Can be prevented.
The current drag operation
The destination coordinates
The original browser event
Fires when over a droppable. Can be prevented.
The current drag operation
Fires on droppable collision. Can be prevented.
Array of detected collisions with droppable targets
Fires when drag ends.
The completed drag operation
Whether the operation was canceled
The original browser event
Registration
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);
Elements automatically register when created with a manager reference. Only use manual registration for advanced use cases.
API Reference
Properties
-
registry
: Tracks active elements and extensions
draggables
: Map of registered draggable elements
droppables
: Map of registered droppable elements
plugins
: Registry of active plugins
sensors
: Registry of active sensors
modifiers
: Registry of active modifiers
-
dragOperation
: Current drag operation state
source
: Currently dragged element
target
: Current drop target
position
: Current drag coordinates
status
: Current operation status
canceled
: Whether operation was canceled
-
monitor
: Event system
addEventListener
: Add event listener
removeEventListener
: Remove listener
-
renderer
: Integration with asynchronous renderers such as React
Methods
Clean up the manager and all registered elements:
- Unregisters all draggables and droppables
- Cleans up all plugins, sensors, and modifiers
- Removes all event listeners
Lifecycle
-
Initialization
- Manager created
- Default plugins and sensors registered
- Custom configuration applied
-
Registration
- Draggable and droppable elements register
- Plugins initialize
- Event listeners bound
-
Operation
- Drag operations tracked
- Events dispatched
- Collisions detected
-
Cleanup
- Elements unregister
- Event listeners removed
- Resources released