DragDropManager

Central orchestrator for drag and drop operations

DragDropManager is the core class that orchestrates all drag and drop operations. It manages entities, coordinates sensors and modifiers, handles collision detection, and dispatches events throughout the drag lifecycle.

Constructor

Creates a new drag and drop manager instance.

const manager = new DragDropManager<T, U>(config?);

config · DragDropManagerInput<T, U>

Configuration object for the manager.

Show DragDropManagerInput properties

plugins · Customizable<Plugins<T>>

Array of plugin constructors or descriptors to extend functionality. Can be a direct array or a function that receives default plugins.

// Direct array (replaces defaults)
plugins: [MyPlugin, AnotherPlugin]

// Function (extends defaults)
plugins: (defaults) => [...defaults, MyPlugin]

sensors · Customizable<Sensors<T>>

Array of sensor constructors or descriptors for handling input. Can be a direct array or a function that receives default sensors.

sensors: [PointerSensor, KeyboardSensor]

modifiers · Customizable<Modifiers<T>>

Array of modifier constructors or descriptors for transforming drag behavior. Can be a direct array or a function that receives default modifiers.

modifiers: [SnapModifier, RestrictToWindowModifier]

renderer · Renderer

Custom renderer for handling visual updates during drag operations.

renderer: {
  rendering: Promise.resolve()
}

T · extends Draggable

Type parameter for draggable entities.

U · extends Droppable

Type parameter for droppable entities.

Properties

actions

actions · DragActions<T, U, DragDropManager<T, U>>

Actions that can be performed during drag operations.

Show Available actions

• start(args) - Start a new drag operation
• move(args) - Move the dragged entity
• stop(args) - Stop the current drag operation
• setDragSource(source) - Set the drag source
• setDropTarget(identifier) - Set the drop target

See DragActions for detailed action methods.

collisionObserver

collisionObserver · CollisionObserver<T, U>

Observes and manages collision detection between draggable and droppable entities.

dragOperation

dragOperation · DragOperation<T, U>

Tracks the current drag operation state and metadata.

Show DragOperation properties

• source - The draggable being dragged
• target - The droppable being targeted
• status - Current operation status
• position - Current position with history
• transform - Current transform coordinates
• shape - Current shape with history
• activatorEvent - Event that initiated the drag
• canceled - Whether the operation was canceled
• modifiers - Active modifiers

monitor

monitor · DragDropMonitor<T, U, DragDropManager<T, U>>

Monitors and emits drag and drop events.

manager.monitor.addEventListener('dragstart', (event, manager) => {
  console.log('Started dragging:', event.operation.source);
});

registry

registry · DragDropRegistry<T, U, DragDropManager<T, U>>

Registry that manages draggable and droppable entities, as well as sensors, modifiers, and plugins.

renderer

renderer · Renderer

Handles rendering of drag and drop visual feedback.

plugins

plugins · Plugin<any>[]

Gets or sets the list of active plugins.

// Get active plugins
const activePlugins = manager.plugins;

// Set plugins
manager.plugins = [NewPlugin, AnotherPlugin];

modifiers

modifiers · Modifier<any>[]

Gets or sets the list of active modifiers.

// Get active modifiers
const activeModifiers = manager.modifiers;

// Set modifiers
manager.modifiers = [SnapModifier];

sensors

sensors · Sensor<any>[]

Gets or sets the list of active sensors.

// Get active sensors
const activeSensors = manager.sensors;

// Set sensors
manager.sensors = [PointerSensor, KeyboardSensor];

Methods

destroy()

Cleans up resources and stops any active drag operations.

manager.destroy();

return · void

No return value.

This method:

• Stops any active drag operation (marking it as canceled)
• Destroys all active modifiers
• Unregisters all entities
• Cleans up the collision observer

DragActions

The actions property provides methods for controlling drag operations:

start()

Starts a new drag operation.

const controller = manager.actions.start({
  source: draggableId,
  coordinates: {x: 0, y: 0},
  event: mouseEvent
});

args · object · required

Configuration for the drag operation.

Show Arguments

source · T | UniqueIdentifier

The source draggable entity or its identifier. If not provided, must be set via setDragSource first.

coordinates · Coordinates · required

The initial coordinates of the drag operation.

{x: number, y: number}

event · Event

The native event that initiated the drag (e.g., mousedown, touchstart).

return · AbortController

An AbortController that can be used to cancel the drag operation.

Throws:

• Error if no drag source is set
• Error if another operation is already active

Events dispatched:

1. beforedragstart (preventable) - Before initialization
2. dragstart - After initialization completes

move()

Moves the dragged entity to a new position.

manager.actions.move({
  by: {x: 10, y: 5},
  event: mouseMoveEvent
});

args · object · required

Configuration for the move operation.

Show Arguments

by · Coordinates

Relative coordinates to move by.

by: {x: 10, y: 5} // Move 10px right, 5px down

to · Coordinates

Absolute coordinates to move to.

to: {x: 100, y: 200} // Move to position (100, 200)

event · Event

The native event that triggered the move.

cancelable · boolean · default: "true"

Whether the move can be prevented via event.preventDefault().

propagate · boolean · default: "true"

Whether to dispatch dragmove events.

Note: Only one of by or to should be provided.

Events dispatched:

• dragmove (preventable if cancelable is true)

stop()

Stops the current drag operation.

manager.actions.stop({
  canceled: false,
  event: mouseUpEvent
});

args · object

Configuration for stopping the operation.

Show Arguments

event · Event

The native event that triggered the stop.

canceled · boolean · default: "false"

Whether the operation was canceled (as opposed to completed successfully).

Events dispatched:

• dragend - With suspend() method for async cleanup

setDragSource()

Sets the source of the drag operation.

manager.actions.setDragSource(draggable);
// or
manager.actions.setDragSource('draggable-id');

source · T | UniqueIdentifier · required

The draggable entity or its unique identifier.

setDropTarget()

Sets the target of the drop operation.

const prevented = await manager.actions.setDropTarget(droppableId);

identifier · UniqueIdentifier | null | undefined · required

The unique identifier of the droppable entity, or null/undefined to clear the target.

return · Promise<boolean>

A promise that resolves to true if the dragover event was prevented.

Events dispatched:

• dragover (preventable) - If status is dragging

Usage Examples

Basic Setup

import {DragDropManager, Draggable, Droppable} from '@dnd-kit/abstract';

const manager = new DragDropManager();

// Create draggable
const draggable = new Draggable(
  {
    id: 'item-1',
    data: {label: 'Drag me'}
  },
  manager
);

// Create droppable
const droppable = new Droppable(
  {
    id: 'zone-1',
    collisionDetector: myCollisionDetector
  },
  manager
);

With Plugins and Sensors

import {DragDropManager} from '@dnd-kit/abstract';
import {PointerSensor} from '@dnd-kit/dom/sensors';
import {SnapModifier} from '@dnd-kit/abstract/modifiers';

const manager = new DragDropManager({
  sensors: [PointerSensor],
  modifiers: [SnapModifier.configure({gridSize: 20})],
  plugins: (defaults) => [...defaults, MyCustomPlugin]
});

Event Handling

const manager = new DragDropManager();

// Prevent drag start conditionally
manager.monitor.addEventListener('beforedragstart', (event) => {
  if (!canDrag(event.operation.source)) {
    event.preventDefault();
  }
});

// Track drag progress
manager.monitor.addEventListener('dragmove', (event) => {
  console.log('Dragging to:', event.operation.position.current);
});

// Handle drop
manager.monitor.addEventListener('dragend', (event) => {
  if (!event.canceled && event.operation.target) {
    const {source, target} = event.operation;
    console.log(`Dropped ${source?.id} onto ${target?.id}`);
  }
});

Manual Drag Control

const manager = new DragDropManager();

// Start drag programmatically
const controller = manager.actions.start({
  source: 'item-1',
  coordinates: {x: 0, y: 0}
});

// Move the drag
manager.actions.move({
  to: {x: 100, y: 50}
});

// Cancel the drag
controller.abort();
// or
manager.actions.stop({canceled: true});

Cleanup

const manager = new DragDropManager();

// Use the manager...

// Clean up when done
manager.destroy();

Type Inference

You can infer draggable and droppable types from a manager:

import type {InferDraggable, InferDroppable} from '@dnd-kit/abstract';

type MyDraggable = InferDraggable<typeof manager>;
type MyDroppable = InferDroppable<typeof manager>;

See Also

• Draggable - Creating draggable entities
• Droppable - Creating droppable entities
• Sensors - Input handling
• Modifiers - Behavior transformation
• Plugins - Extending functionality