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();
​
options
object
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

​
beforedragstart
Event
Fires before drag begins. Can be prevented.
​
dragstart
Event
Fires when drag starts.
​
dragmove
Event
Fires during movement. Can be prevented.
​
dragover
Event
Fires when over a droppable. Can be prevented.
​
collision
Event
Fires on droppable collision. Can be prevented.
​
dragend
Event
Fires when drag ends.

​
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

​
destroy()
function
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

  1. Initialization
    • Manager created
    • Default plugins and sensors registered
    • Custom configuration applied
  2. Registration
    • Draggable and droppable elements register
    • Plugins initialize
    • Event listeners bound
  3. Operation
    • Drag operations tracked
    • Events dispatched
    • Collisions detected
  4. Cleanup
    • Elements unregister
    • Event listeners removed
    • Resources released