SortableContext for Reorderable Lists

SortableContext is a specialized dnd-kit component that wraps a reorderable list. While useDraggable and useDroppable handle arbitrary drag-and-drop, SortableContext specifically handles the case where items in a list need to be reordered by dragging them into a new position.

SortableContext requires an items prop: an array of unique string or number IDs that match the IDs used in the child sortable components. The order of this array defines the current order of items. When you update this array in state, the list re-renders in the new order.

SortableContext accepts a strategy prop that controls how items are sorted. verticalListSortingStrategy is for vertical lists and calculates the insertion point based on vertical position. horizontalListSortingStrategy is for horizontal lists. rectSortingStrategy is for grids. Choose the strategy that matches your layout.

Inside SortableContext, each list item uses the useSortable({ id }) hook instead of useDraggable. useSortable is a superset of useDraggable — it returns the same attributes, listeners, setNodeRef, and transform, plus additional values specific to sorting like isDragging and overIndex.

The isDragging value from useSortable is true while the item is actively being dragged. You typically use this to reduce the opacity or add a placeholder style to the original item in the list while it is being dragged. This visual gap shows the user where the item currently lives in the list.

dnd-kit exports an arrayMove(array, fromIndex, toIndex) utility from @dnd-kit/sortable. It returns a new array with the item at fromIndex moved to toIndex. This is the standard way to update your state array when a sort drag completes.

In the DndContext onDragEnd callback for a sortable list, you find the old and new indices using items.indexOf(event.active.id) and items.indexOf(event.over?.id). If both indices are valid and different, you call setItems(arrayMove(items, oldIndex, newIndex)) to reorder the array.

When an item is dragged, the other items in the list animate to new positions to show where the dragged item will land. useSortable provides a CSS transform for each non-dragged item that slides it out of the way. Adding a CSS transition to this transform creates smooth movement animation.

Apply a CSS transition on the transform property of sortable items: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. When an item is being dragged, no transition is needed (it should track the cursor directly). When displaced, a transition creates smooth sliding animation.

For the best UX, combine SortableContext with DragOverlay. The dragged item in the list becomes a semi-transparent placeholder (using isDragging), while DragOverlay renders a solid, elevated copy that follows the cursor. This approach avoids visual glitches where the dragged item jumps between positions.

SortableContext works equally well for vertical lists (task boards, todo lists) and horizontal lists (tab bars, image carousels). Switch between strategies by changing the strategy prop. You can even use it for a grid layout with rectSortingStrategy, which calculates the nearest grid cell based on drag position.

Which arguments does arrayMove take when called inside onDragEnd to reorder a sortable list?

SortableContext wraps a reorderable list and requires an items array of unique IDs and a strategy (vertical, horizontal, or grid). Each item uses useSortable instead of useDraggable, gaining isDragging and overIndex. In onDragEnd, arrayMove(items, oldIndex, newIndex) reorders the array. CSS transitions on the transform animate displaced items smoothly.