Drag & Drop with dnd-kit

When to use this

• Building sortable lists, Kanban boards, or reorderable grids in React.
• Needing keyboard-accessible drag-and-drop (not just mouse/touch).
• Implementing drag between multiple containers (multi-list Kanban).
• Wanting animated reorder transitions during and after drag.
• Do NOT use this for FLIP-based reorder animations without drag interaction; see flip-sortable-lists instead.

Mental model

dnd-kit separates concerns into three layers: sensors (how drag starts), collision detection (what is the drop target), and the rendering layer (what the user sees).

Sensors detect drag gestures. The pointer sensor handles mouse/touch with an activation constraint (minimum distance or delay to distinguish drag from click). The keyboard sensor enables full arrow-key-based drag-and-drop.

DragOverlay is critical. Instead of moving the actual list item (which causes layout shift), dnd-kit renders a separate overlay element that follows the cursor. The original item in the list shows a placeholder state (dimmed, outlined, or empty). When the drag ends, the overlay disappears and the list reorders. This separation is what makes animations smooth, because the list items only need to shift positions, not track the cursor.

Sortable is a higher-level abstraction built on the core drag system. useSortable returns transform, transition, and listeners for each item. The transform handles the visual shift during drag (items moving up/down to make room). The transition animates the position change after drop.

Collision detection algorithms determine which droppable area the dragged item is over. closestCenter works for most lists. rectIntersection is better for grids. closestCorners handles irregular layouts. For multi-container Kanban, you often need a custom algorithm that first detects the container, then the position within it.