Skip to main content

Reorder

Drag-to-reorder lists with layout animations built in.

Reorder.Group and Reorder.Item turn any list into a drag-to-reorder list. Items are draggable, animate to their new positions, and the group reports the new order.

  • ⇅ spring
  • ⇅ tween
  • ⇅ inertia
  • ⇅ keyframes
		<script>
	import { Reorder } from "motion-start";
 
	let items = $state(["spring", "tween", "inertia", "keyframes"]);
</script>
 
<Reorder.Group values={items} onReorder={(next) => (items = next)}>
	{#snippet children({ item })}
		<Reorder.Item value={item}>
			{item}
		</Reorder.Item>
	{/snippet}
</Reorder.Group>

Reorder.Group

Prop Type Description
values T[] The array being reordered. Required.
onReorder (newOrder: T[]) => void Called with the new order as items are dragged. Required.
axis "x" | "y" Drag axis. Defaults to "y".
as string Element to render. Defaults to "ul".

The group renders its children through a snippet that receives each item, so the list stays keyed by value.

Reorder.Item

Prop Type Description
value T The item's entry in values. Required.
as string Element to render. Defaults to "li".

Reorder.Item is a motion component, so whileDrag, transition and the other animation props all work.

		<Reorder.Item value={item} whileDrag={{ scale: 1.04 }} transition={{ type: "spring" }}>
	{item}
</Reorder.Item>