pnpm dlx shadcn@latest add @audio-ui/sortable-drag
import { startSortableDrag } from "@/lib/sortable-drag";| Files | lib/sortable-drag.ts |
|---|---|
| Depends on | Nothing |
| npm | Nothing |
| Used by | device-chain, mixer-view, use-track-reorder |
| Export | Kind | What it is |
|---|---|---|
SortableDragOptions | interface | |
startSortableDrag | function | Follows a press on an item until it is released: call it from pointerdown. |
Usage
The gesture of reordering a row by dragging one of its items: the others slide aside, the item shows dimmed where it would land, a copy follows the pointer, and the view scrolls at its edges, all without a React render while it moves.
import { startSortableDrag } from "@/lib/sortable-drag";
onPointerDown={(event) =>
startSortableDrag({
axis: "y",
from: index,
ghost: () => ghostRef.current,
items: rows,
onEnd: (to, released) => {
if (released && to !== null) move(index, to);
},
onLift: () => setDragging(true),
scroller: listRef.current,
x: event.clientX,
y: event.clientY,
})
}useTrackReorder, the Device chain and the Mixer reorder with it.