dnd kit Drag and Drop

Build accessible drag-and-drop with dnd kit. Implements sortable lists, kanban boards, and draggable canvases with keyboard support, collision detection, drag overlays, and sensors — lightweight and free of external dependencies.

This skill helps you add drag-and-drop with dnd kit. It wires DndContext, useDraggable, and useDroppable, builds sortable lists and multi-column kanban boards with the sortable preset, configures pointer/keyboard/touch sensors, tunes collision detection and drag overlays, and keeps interactions accessible with built-in keyboard support and ARIA announcements.

When to use

Use when adding drag-and-drop to React — reorderable lists, kanban boards, file/upload zones, or draggable canvas elements — that must stay accessible and performant.

Examples

Sortable kanban board

Multi-column drag-and-drop

Build a kanban board with dnd kit where cards can be reordered within a column and moved between columns, with a drag overlay and keyboard support

Reorderable list

Accessible sortable list

Create an accessible reorderable list with dnd kit sortable preset that persists the new order to state on drag end