Drag & Reorder
Balance Pack Inventory
Stone-and-parchment palette with terracotta accents; tap polygon gear onto a balance pan whose beam responds to the weight limit.
canvasmedium complexitymoderate motionpointermobile-ready
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
A playful item picker with capacity feedback and keyboard alternatives.
When not to
Persistent inventory management without connecting real item data and storage.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Adapt content through existing data arrays; retain named palette, controls and demo-v1 lifecycle.
Safe to edit
- Dark/light palette tokens
- Sample data and visible labels
- Animation timing and geometry
Keep intact
- IIFE and namespaced CSS/IDs
- Initial Manual mode; sticky first-input takeover
- Theme URL/message hook; redraw canvas palette
- Keyboard/focus/live status; reduced motion; hidden pause
Known limitations
- Illustrative data; local state resets on remount.
- Canvas/SVG labels scale with artwork; inspect readability at small sizes.
More Drag & Reorder components
- Kanban MoveThree-column kanban board where a cyan card lifts and spring-animates between lanes via FLIP. Idle demo stops after first input; supports arrow keys and…
- Pull to RefreshA 5-row canvas list springs down on drag, revealing diagonal bars and a rotating geometric indicator; releasing past threshold triggers a 1.5s sync spinner.
- Sortable Grid3x3 grid of colored numbered tiles that spring-animate into position as tiles are dragged or swapped; initial idle shuffle stops after first input.
- Dual RangeCanvas dual-range slider with two spring-driven thumbs (white lo, amber hi), hatched fill, delta readout, and tick marks. Initial breathing stops after…
- Carousel ThrowSeven colored cards orbit a glowing hub in a radial ring; drag to fling with angular inertia, release to snap to the nearest card under the marker.
- Drag Handle5 dark rows with grip handles spring-animate to new positions when dragged or arrow-keyed; the lifted row glows cyan and scales up slightly.