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
QuickstartDraggable