Skip to main content

​
Overview

The @dnd-kit/dom package provides a complete DOM-based implementation of the dnd-kit drag-and-drop framework. It includes built-in sensors for pointer and keyboard interactions, plugins for accessibility and visual feedback, and high-level primitives for common use cases.

​
Installation

npm install @dnd-kit/dom

​
Core Exports

​
DragDropManager

The main orchestrator for drag-and-drop operations. 
import { DragDropManager } from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: [...],
  sensors: [...],
  modifiers: [...]
});
See DragDropManager for detailed documentation.

​
Entities

  • Draggable - Makes elements draggable
  • Droppable - Makes elements drop targets
  • Sortable - Combines draggable and droppable for sortable lists

​
Sensors

See Sensors for detailed documentation.

​
Plugins

See Plugins for detailed documentation.

​
Default Preset

The DragDropManager includes a default preset with recommended sensors and plugins: 
const defaultPreset = {
  sensors: [
    PointerSensor,
    KeyboardSensor
  ],
  plugins: [
    Accessibility,
    AutoScroller,
    Cursor,
    Feedback,
    PreventSelection
  ],
  modifiers: []
};
This preset is automatically applied unless you override it: 
// Uses default preset
const manager = new DragDropManager();

// Override sensors only
const manager = new DragDropManager({
  sensors: [PointerSensor] // Keyboard disabled
});

// Disable default preset entirely
const manager = new DragDropManager({
  sensors: null,
  plugins: null
});

​
Events

The manager emits events throughout the drag lifecycle: 
manager.monitor.addEventListener('dragstart', (event) => {
  console.log('Drag started:', event.source);
});

manager.monitor.addEventListener('dragover', (event) => {
  console.log('Dragging over:', event.target);
});

manager.monitor.addEventListener('dragend', (event) => {
  console.log('Drag ended:', event.target);
});

​
Event Types

  • beforedragstart - Before drag initialization
  • dragstart - Drag operation started
  • dragmove - Draggable position changed
  • dragover - Dragging over a droppable
  • collision - Collision detected with droppable
  • dragend - Drag operation ended

​
Basic Example

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

const manager = new DragDropManager();

const draggable = new Draggable(
  {
    id: 'draggable-1',
    element: document.getElementById('draggable')
  },
  manager
);

const droppable = new Droppable(
  {
    id: 'droppable-1',
    element: document.getElementById('droppable')
  },
  manager
);

manager.monitor.addEventListener('dragend', (event) => {
  if (event.target) {
    console.log('Dropped on:', event.target.id);
  }
});

​
Package Exports

// Main export
export {
  DragDropManager,
  defaultPreset,
  resolveCustomizable
};

// Entities
export { Draggable, Droppable };

// Sensors
export { PointerSensor, KeyboardSensor, PointerActivationConstraints };

// Plugins
export {
  Accessibility,
  AutoScroller,
  Cursor,
  Feedback,
  PreventSelection,
  Scroller,
  ScrollListener,
  StyleInjector
};

// Events
export type {
  CollisionEvent,
  BeforeDragStartEvent,
  DragStartEvent,
  DragMoveEvent,
  DragOverEvent,
  DragEndEvent
};

​
Additional Exports

The package also provides additional exports for specific use cases:
  • /sortable - Sortable list primitives
  • /modifiers - Position and constraint modifiers
  • /utilities - DOM utilities and helpers
  • /plugins/debug - Debug visualization plugin

​
Next Steps

DragDropManager

Configure the drag-and-drop manager

Sensors

Configure pointer and keyboard sensors

Plugins

Extend functionality with plugins

Sortable

Build sortable lists

Build docs developers (and LLMs) love

Get started for freeTalk to us