Drag and Drop Hooks

Hooks for managing drag and drop state, built on @dnd-kit.

---

useDragAndDropList

Manages drag and drop within a single list.

Signature

function useDragAndDropList<T>(
  options: UseDragAndDropListOptions<T>
): UseDragAndDropListResult<T>

UseDragAndDropListOptions<T>

Property	Type	Required	Description
items	T[]	Yes	Array of items
getItemId	(item: T) => UniqueIdentifier	Yes	ID extractor
onReorder	(items: T[], activeId, overId) => void	No	Reorder callback

UseDragAndDropListResult<T>

Property	Type	Description
items	T[]	Current items
itemIds	UniqueIdentifier[]	Item IDs
activeItem	T | null	Currently dragged item
handleDragStart	(id) => void	Drag start handler
handleDragEnd	(activeId, overId) => void	Drag end handler
handleDragCancel	() => void	Cancel handler
reorderItems	(activeId, overId) => T[]	Get reordered array

Example

const { items, activeItem, handleDragStart, handleDragEnd } = useDragAndDropList({
  items: tasks,
  getItemId: (task) => task.id,
  onReorder: (reordered) => setTasks(reordered),
})

---

useDragAndDropMultiList

Manages drag and drop across multiple lists (Kanban-style).

Signature

function useDragAndDropMultiList<T, L>(
  options: UseDragAndDropMultiListOptions<T, L>
): UseDragAndDropMultiListResult<T, L>

UseDragAndDropMultiListOptions<T, L>

Property	Type	Required	Description
lists	L[]	Yes	Array of lists
getListId	(list: L) => UniqueIdentifier	Yes	List ID extractor
getListItems	(list: L) => T[]	Yes	Get items from list
getItemId	(item: T) => UniqueIdentifier	Yes	Item ID extractor
onMoveWithinList	(listId, activeId, overId, newIndex) => void	No	Same-list move
onMoveBetweenLists	(sourceId, targetId, itemId, newIndex) => void	No	Cross-list move
onReorderLists	(activeId, overId) => void	No	List reorder

UseDragAndDropMultiListResult<T, L>

Property	Type	Description
lists	L[]	Current lists
listIds	UniqueIdentifier[]	List IDs
activeItem	T | null	Currently dragged item
activeList	L | null	Currently dragged list
activeType	'item' | 'list' | null	Type being dragged
handleDragStart	(id, type) => void	Drag start handler
handleDragOver	(activeId, overId) => void	Drag over handler
handleDragEnd	(activeId, overId) => void	Drag end handler
handleDragCancel	() => void	Cancel handler
findItem	(id) => { item, list } | null	Find item by ID
findList	(id) => L | null	Find list by ID

---

Utility Functions

reorderArray

function reorderArray<T>(array: T[], fromIndex: number, toIndex: number): T[]

moveItemBetweenArrays

function moveItemBetweenArrays<T>(
  sourceArray: T[],
  targetArray: T[],
  sourceIndex: number,
  targetIndex: number
): { source: T[]; target: T[] }

See also

• useDragAndDrop (Conceptual)
• Drag and Drop Components