@dnd-kit/sortable

Sortable Lists

This feature allows developers to create vertical lists that can be sorted using drag-and-drop. The code sample demonstrates how to set up a DndContext with sensors for pointer and keyboard interactions, and a SortableContext to manage the sortable items.

import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';

function SortableList({ items }) {
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor)
  );

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter}>
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        {items.map((id) => (
          <SortableItem key={id} id={id} />
        ))}
      </SortableContext>
    </DndContext>
  );
}

Sortable Grids

This feature enables the creation of sortable grids. The code sample shows how to use a DndContext with a MouseSensor and a SortableContext with a rectSortingStrategy to manage the layout of sortable items in a grid format.

import { DndContext, MouseSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';

function SortableGrid({ items }) {
  const sensors = useSensors(useSensor(MouseSensor));

  return (
    <DndContext sensors={sensors}>
      <SortableContext items={items} strategy={rectSortingStrategy}>
        {items.map((id) => (
          <SortableItem key={id} id={id} />
        ))}
      </SortableContext>
    </DndContext>
  );
}