solidjs-motion

Reorder (basic)

<Reorder.Group> + <Reorder.Item> — drag any row to reorder a controlled list. Center-cross detection mutates values() live; siblings FLIP into new slots; dragged row snaps back via dragSnapToOrigin.

Drag any row to reorder. Center-cross detection swaps adjacent items live; siblings FLIP into their new slots via layout; the dragged row tracks the pointer and snaps to its (now-updated) slot on release via dragSnapToOrigin.

  • Tomato#tomato
  • Cucumber#cucumber
  • Onion#onion
  • Pepper#pepper
  • Carrot#carrot