loading code fetching the highlighted snippet
FIG-001/ GESTURE
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.
-
Reorder.Groupowns the order: it watches each drag and, when an item's edge crosses the midpoint of a neighbor, callsonReorderwith the swapped array. Assigning that back to$stateis the whole wiring. -
axis="y"locks item drags vertically. Items key on their own value in the{#each}block — the same value passed toReorder.Item'svalueprop. -
whileDragpasses straight through to the underlying motion component — the lifted item scales up and gains a shadow while the gesture is active.
// reorder drag to sort
- 🍅 Tomato
- 🥒 Cucumber
- 🧀 Cheese
- 🥬 Lettuce
category · gesture
sheet · sheet 01 / 05
⟳ to re-run
FIG-002/ GRID
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.
-
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
valuesarray; Reorder maps the visual wrapped layout back to that logical order.
// reorder — xy A · B · C · D · E · F
- A
- B
- C
- D
- E
- F
category · grid
sheet · sheet 02 / 05
⟳ to re-run
FIG-003/ RTL
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.
- Omitting
axislets measured geometry selectx,y, orxy; 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.
// axis — auto dir: rtl
- Aleph
- Bet
- Gimel
- Dalet
category · rtl
sheet · sheet 03 / 05
⟳ to re-run
FIG-004/ SCROLL
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.
- The scroll container is a
motion.divwithlayoutScroll, 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.
// reorder — scrollable 10 items
- Aardvark
- Beaver
- Capybara
- Dingo
- Echidna
- Fennec
- Gecko
- Hedgehog
- Iguana
- Jackal
category · scroll
sheet · sheet 04 / 05
⟳ to re-run
FIG-005/ KEYBOARD
reorder from the keyboard.
No pointer needed. Tab to an item, press Space to grab it, move it with the arrow keys and press Space again to drop it. Escape puts the list back the way it was when you grabbed.
- Always on: every
Reorder.Itemis focusable (tabindex={0}). Space grabs and drops, arrows along the group's axis move, Escape restores the order from the grab. Enter is left for taps. - A grabbed item gets its
whileDragstate, so the lifted look you style for pointer drags shows for keyboard grabs too. - Each move calls
onReorderlike a drag does, and the moved item keeps focus and its grab while the list re-renders around it.
// keyboard space · arrows · esc
- 🍓 Strawberry
- 🍋 Lemon
- 🫐 Blueberry
- 🍑 Peach
- 🥝 Kiwi
Tab to an item, Space to grab, arrows to move
category · keyboard
sheet · sheet 05 / 05
⟳ to re-run