@dnd-kit/dom

The framework-agnostic DOM implementation layer for @dnd-kit, built on top of @dnd-kit/abstract. This package provides the core drag and drop primitives that work directly with the DOM, and serves as the foundation for all framework adapters (@dnd-kit/react, @dnd-kit/vue, @dnd-kit/svelte, @dnd-kit/solid).

Installation

npm install @dnd-kit/dom

Overview

Most consumers will use one of the framework-specific adapters rather than this package directly. However, @dnd-kit/dom can be used standalone for framework-agnostic or vanilla JavaScript projects.

Entry points

| Entry point | Description | | ------------------------ | ------------------------------------------------------------------------ | | @dnd-kit/dom | Core API — DragDropManager, Draggable, Droppable, sensors, plugins | | @dnd-kit/dom/sortable | Sortable primitives — Sortable, sorting utilities | | @dnd-kit/dom/modifiers | Built-in modifiers for constraining drag movement | | @dnd-kit/dom/utilities | DOM utility functions |

Key concepts

• DragDropManager — Orchestrates drag and drop operations, manages sensors, plugins, and collision detection.
• Draggable — Represents a draggable DOM element.
• Droppable — Represents a droppable DOM element.
• Sensors — Detect user input (pointer, keyboard) and translate it into drag operations.
• Plugins — Extend core behavior (feedback, auto-scrolling, accessibility, etc.).
• Modifiers — Transform drag coordinates to constrain or modify movement.

Documentation

Visit dndkit.com for full documentation, guides, and interactive examples.