# Reordering
> Drag-to-reorder list items with smooth layout animations using Svelte Motion. Demonstrates drag gestures and automatic layout transitions.
**Source:** [https://motion.svelte.page/examples/reordering](https://motion.svelte.page/examples/reordering)
**Markdown mirror:** [https://motion.svelte.page/examples/reordering.md](https://motion.svelte.page/examples/reordering.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: shuffling list items.
Four coloured tiles shuffle their order every second. Each tile carries `layout` — motion measures the rect before + after the array mutation, then springs each tile between positions.
**Metadata:** tag: `LAYOUT` | pattern: `flip-reorder`
### Notes
- The list keys on `backgroundColor` — Svelte tracks the same item across re-renders even when its index changes, so motion sees a position change instead of an unmount + remount and can FLIP it.
- Each `motion.li` has `layout` on it. Motion samples each item's rect before and after the array mutation; the difference becomes the FLIP delta, and the configured spring carries the tile to its new spot.
- Shuffle fires from a `setTimeout` in `onMount`, recursing via `scheduleNextShuffle()` so a single source schedules every cycle. `onMount`'s cleanup clears the pending timeout — important when the component unmounts mid-flight.
### Source
#### Default.svelte
Source file: [src/lib/examples/reordering/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/reordering/demos/Default.svelte)
```svelte
// reorderinglayout: flip
container)}>
{#each order as backgroundColor (backgroundColor)}
({
...item,
backgroundColor
}))}
/>
{/each}