@dnd-kit Drag and Drop Patterns

Quick Guide: @dnd-kit/core supplies the primitives — DndContext, useDraggable, useDroppable — and @dnd-kit/sortable adds useSortable, SortableContext and arrayMove for reorderable lists. Nothing in the DOM is reordered during a drag: elements are moved by CSS transform and the state update happens on drop. Input arrives through sensors, which are separate plugins, so keyboard support is a sensor you add rather than a behaviour you get. Collision detection is pluggable and the choice depends on the layout. DragOverlay is needed whenever the dragged element would be clipped or unmounted mid-drag.

Detailed Resources:

• examples/core.md — draggable and droppable components, sortable lists, sensor setup, collision composition, announcements, drag handles
• examples/advanced.md — DragOverlay with sortables, multi-container Kanban, modifiers, custom collision detection, disabled items, item metadata
• reference.md — hook signatures and return values, event handler types, sorting strategies, collision algorithms, modifiers, default key bindings, applied ARIA attributes

Which path applies

• One list, items stay put. A single SortableContext, closestCenter, and the transform on the item itself. Simplest, nothing extra to keep mounted. Follow examples/core.md.
• Items cross containers, or the list scrolls. Both unmount or clip the dragged element mid-drag, so it needs a DragOverlay and an activeId in state. Multi-container also wants closestCorners and an onDragOver handler for the transfer. Follow examples/advanced.md.
• Drop zones rather than reordering — a trash bin, an upload target, category bins. @dnd-kit/core alone, no sortable package, and usually pointerWithin. Follow examples/core.md Patterns 1 and 4.