# Reorder > Drag-to-reorder lists and wrapped grids with automatic axis detection, RTL-aware insertion, FLIP siblings, and edge auto-scroll. **Source:** [https://motion.svelte.page/examples/reorder](https://motion.svelte.page/examples/reorder) **Markdown mirror:** [https://motion.svelte.page/examples/reorder.md](https://motion.svelte.page/examples/reorder.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: drag to reorder. The motion.dev grocery list. Grab any item and drag it vertically — the dragged item pins under the cursor while its siblings spring out of the way, and releasing snaps it into its new slot. **Metadata:** tag: `GESTURE` | pattern: `reorder-group` ### Notes - `Reorder.Group` owns the order: it watches each drag and, when an item's edge crosses the midpoint of a neighbor, calls `onReorder` with the swapped array. Assigning that back to `$state` is the whole wiring. - `axis="y"` locks item drags vertically. Items key on their own value in the `{#each}` block — the same value passed to `Reorder.Item`'s `value` prop. - `whileDrag` passes straight through to the underlying motion component — the lifted item scales up and gains a shadow while the gesture is active. ### Source #### Default.svelte Source file: [src/lib/examples/reorder/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/reorder/demos/Default.svelte) ```svelte

// reorder drag to sort

(items = next)} style={styleString(() => ({ listStyle: 'none', padding: 0, margin: 0, width: '260px' }))} > {#each items as item (item)} {item} {/each}

``` ## FIG-002: reorder in two dimensions. Drag one tile horizontally and vertically across wrapped rows. Every displaced tile springs into its new slot during the same continuous gesture. **Metadata:** tag: `GRID` | axis: `xy` ### Notes - `axis="xy"` clusters overlapping boxes into visual rows and chooses the nearest row and horizontal insertion slot as the tile moves. - One uninterrupted gesture can cross both axes while keyed siblings FLIP into every newly vacated slot. - The consumer still owns one flat `values` array; Reorder maps the visual wrapped layout back to that logical order. ### Source #### Grid.svelte Source file: [src/lib/examples/reorder/demos/Grid.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/reorder/demos/Grid.svelte) ```svelte

// reorder — xy {items.join(' · ')}

(items = next)} style={groupStyle} > {#each items as item (item)} {item} {/each}

``` ## FIG-003: detect direction, respect intent. This horizontal group omits axis and renders RTL. Geometry selects horizontal dragging automatically, and visual leftward movement advances the logical data order without reversing the array. **Metadata:** tag: `RTL` | axis: `auto` ### Notes - Omitting `axis` lets measured geometry select `x`, `y`, or `xy`; no orientation prop is needed for this row. - Direction comes from the group's computed style, so nested RTL regions behave correctly without changing document direction. - Consumers keep values in logical order. Reorder interprets horizontal insertion in the visual direction instead of asking you to reverse the array. ### Source #### AutoAxisRtl.svelte Source file: [src/lib/examples/reorder/demos/AutoAxisRtl.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/reorder/demos/AutoAxisRtl.svelte) ```svelte

// axis — auto dir: rtl

(items = next)} style={groupStyle} > {#each items as item (item)} {item} {/each}

``` ## FIG-004: reordering long lists. Ten items in a 280px scroll container. Drag an item toward the top or bottom edge and hold — the container auto-scrolls beneath the held item so a single gesture can carry it the length of the list. **Metadata:** tag: `SCROLL` | pattern: `auto-scroll` ### Notes - The scroll container is a `motion.div` with `layoutScroll`, so layout measurements are taken in the container's coordinate space and stay correct at any scroll position. - Holding a dragged item within 50px of the container's edge auto-scrolls it — speed ramps up quadratically as the pointer nears the edge, and scrolling only starts when the gesture is moving toward that edge. - Items keep reordering while the content scrolls beneath the held pointer, so one gesture can carry an item from the top of the list to the bottom. ### Source #### Scrollable.svelte Source file: [src/lib/examples/reorder/demos/Scrollable.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/reorder/demos/Scrollable.svelte) ```svelte

// reorder — scrollable {items.length} items

({ height: '280px', width: '260px', overflowY: 'scroll', padding: '10px', border: '1px solid var(--brut-rule-2, #bbc4c0)', background: 'var(--brut-bg, #f8fcfb)' }))} > (items = next)} style={styleString(() => ({ listStyle: 'none', padding: 0, margin: 0 }))} > {#each items as item (item)} {item} {/each}

```