@dnd-kit/dom

DOM implementation of dnd-kit with sensors, plugins, and drag-and-drop primitives

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

• PointerSensor - Handles mouse, touch, and pen input
• KeyboardSensor - Handles keyboard-based dragging

See Sensors for detailed documentation.

Plugins

• Accessibility - Screen reader announcements and ARIA attributes
• AutoScroller - Auto-scroll when dragging near edges
• Feedback - Visual feedback during drag operations
• Cursor - Cursor styling during drag
• PreventSelection - Prevents text selection

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