# Drag to Reorder Sortable List > A vertical list that reorders by dragging: the row lifts and follows the pointer while the rows it crosses slide out of the way, so the open gap is always the slot it will land in. Canonical: https://gsapvault.com/ui-elements/drag-reorder-sortable-list Live demo: https://gsapvault.com/demos/drag-reorder-sortable-list/index.html | Property | Value | |----------|-------| | Type | ui-element | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Draggable | | Techniques | draggable, reorder, keyboard-navigation, micro-interaction | | Uses Lenis | No | ## Overview A sortable list where the gap is the interface. Press a row and it lifts a little, picks up a shadow and an accent ring, and follows the pointer on the y axis; as it crosses each neighbour's midpoint that neighbour slides out of the way, so there is always an open slot under the cursor showing exactly where the row will land. Let go and it settles into that slot on a short damped ease, no bounce, and every row finishes on a whole position with no transform left on it. The same moves are on the keyboard. Focus a handle, press Space to pick the row up, move it with the arrow keys, Space to drop or Escape to put it back where it started, with each move announced through a live region: "Moved Design review to position 3 of 7." On a touch screen the handle is the only drag start, so a finger anywhere else on the row still scrolls the page. The list emits a reorder event carrying the ordered ids, so persisting the new order is one listener. One HTML file, one stylesheet, one script, vanilla JavaScript with GSAP and the Draggable plugin, no framework. Light and dark themes come from one set of custom properties switched by a single data-variant attribute, and a data-density attribute swaps the row rhythm without re-initialising anything. ## Features - Draggable rows locked to the y axis, lifted with a scale, a shadow and a 1px accent ring - The rows the drag crosses slide aside, so the open gap tracks the pointer - A damped settle on release, and every row ends on an integer position with its transform cleared - Full keyboard reorder: Space to lift, arrows to move, Space to drop, Escape to cancel back to the original slot - A polite live region that announces every move, drop and cancel by name and position - Touch-aware: the handle starts the drag on coarse pointers so the row body still scrolls the page - data-density switches the row rhythm and the drag re-measures itself on the next press - A bubbling reorder event carrying the ordered ids, the moved id and its old and new index - Light and dark themes on one set of custom properties ## Use Cases - Board and pipeline settings where the stage order is the configuration - Checklists, playbooks and onboarding steps a user arranges themselves - Dashboard and sidebar layouts where panels are ordered by hand - Playlists, queues and priority lists in an admin or product surface - Form builders and table column pickers that need an accessible reorder ## Vibe-Code Ready Setup This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### Dragging, and the gap that follows the pointer The lifted row travels with the pointer on its own axis while its neighbours make room: the row pitch is read fresh on every press, so a density or viewport change needs nothing extra, and whenever the pointer crosses a neighbour's midpoint that neighbour slides one pitch aside, leaving an open slot under the cursor at all times. ### The settle, and why nothing is left transformed On release the component measures where every row is, moves the dragged row in the DOM, measures again, and eases each row from the difference into its new place with a damped settle. The lift scale rides the same movement back to rest, so there is no pop at the end, and every row finishes on a whole pixel with no leftover transform, which is what keeps a second drag starting from the truth. ### The keyboard model The handle is a real button with a pressed state, so picking a row up is something a screen reader can report. Space or Enter lifts it, the arrow keys move it through the same settle the drag uses, Home and End send it to either end, Space drops it and Escape returns it to where it started. Each move writes a sentence into a polite live region, and the handle keeps focus across the move so an arrow press never silently drops the row. ### Touch and reduced motion On a coarse pointer only the handle starts a drag, so a swipe on the row body is a page scroll; under reduced motion every move happens at once, which keeps the reordering working while removing the travel. The two conditions are complementary pairs, so every device matches something and the component always initialises. ## Documentation How this UI element works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### What's Included - `index.html`: the demo page and the markup to copy - `assets/style.css`: component styles, plain CSS custom properties for colours - `assets/script.js`: readable, commented source with an `onReady` guard - Rows dragged on the y axis with GSAP Draggable, lifted with a scale, a shadow and a 1px accent ring - A live gap: the rows between the row's old and new index tween aside by exactly one row pitch, so the opening under the pointer is the landing slot - A damped settle on drop, after which every row sits on a whole position with its transform cleared, not parked on a leftover offset - A complete keyboard reorder: `Space` to lift, arrows to move, `Space` to drop, `Escape` to cancel, using the same tweened moves - A polite live region that announces the pick-up, every move, the drop and the cancel by name and position - On a coarse pointer the handle is the only drag start, so a finger on the row body still scrolls the page - `data-density` swaps the row rhythm; the drag re-measures the pitch on the next press, so nothing needs re-initialising - A bubbling `reorder` event carrying the ordered ids - Roles and states used: `