React Drag and Drop with dnd-kit: Sortable Lists and Kanban

Why dnd-kit for React Drag and Drop?

dnd-kit is a lightweight, modular drag-and-drop library for React that is accessible by default. Unlike react-beautiful-dnd (no longer maintained) and react-dnd (complex API), dnd-kit is actively maintained, supports keyboard and screen reader accessibility, works with virtual lists, and has a clean, composable API. It is the recommended choice for new React drag-and-drop implementations in 2025.

Setting Up DndContext

Wrap your drag-and-drop area with DndContext from @dnd-kit/core. DndContext manages drag state and emits events like onDragStart, onDragEnd, and onDragOver. Provide sensors (mouse, touch, keyboard) via the useSensors hook — the PointerSensor works for mouse and touch, and KeyboardSensor enables keyboard-based drag with arrow keys.

Building a Sortable List

Install @dnd-kit/sortable for sortable list functionality. Wrap your list with SortableContext and provide an array of item IDs. Each list item component uses the useSortable hook to get drag listeners, attributes, and CSS transform values. Apply the transform to the element's style using CSS.Transform.toString() from @dnd-kit/utilities to animate the item during dragging.

Kanban Board with Multiple Containers

A Kanban board requires dragging items between multiple containers (columns). Use multiple SortableContext components, one per column. In the onDragOver event, detect when an item is dragged over a different container and update your state to move it there. In onDragEnd, finalize the move using arrayMove from @dnd-kit/sortable to reorder items within a column or move them between columns.

Drag Overlay for Visual Feedback

The DragOverlay component renders a floating copy of the dragged item that follows the cursor. This provides clear visual feedback and prevents layout shifts in the source list. Render the original item with opacity-0 while dragging and show the full styled version in DragOverlay. This pattern is cleaner than CSS transforms on the original element and works correctly across container boundaries.

Persistence and State Management

After a drag operation completes, persist the new order to your backend. Optimistically update your local state immediately for instant UI feedback, then send a PATCH request to save the order. If the server request fails, roll back to the previous order with an error notification. Use TanStack Query's useMutation with onMutate for optimistic updates and onError for rollbacks.