DnD Kit

pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

import {
  DndContext,
  SortableContext,
  SortableItem,
  arrayMove,
  verticalListSortingStrategy,
} from "@/components/vendor/dnd-kit"

function MyList() {
  const [items, setItems] = useState([...])

  function handleDragEnd(event) {
    const { active, over } = event
    if (over && active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.findIndex((i) => i.id === active.id)
        const newIndex = items.findIndex((i) => i.id === over.id)
        return arrayMove(items, oldIndex, newIndex)
      })
    }
  }

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={items.map(i => i.id)}>
        {items.map((item) => (
          <SortableItem key={item.id} id={item.id}>
            {item.name}
          </SortableItem>
        ))}
      </SortableContext>
    </DndContext>
  )
}