Drag & Drop Sorting
拖拽排序
Aliases:拖拽排序拖动调整顺序拖动排序上下移动排序拖拽换位置拖放排列
What is it
Reorders list items by direct manipulation: press an item (or its handle), drag it to a target slot while neighbours give way and a drop hint appears. It turns ordering into a spatial, what-you-see-is-what-you-get action — with buttons kept as an accessible fallback.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Users control the order — playlists, task lists, section config
- Moderately sized lists where all items fit on one screen
- Frequent reordering where stepping one-by-one is too slow
✕ When not to use
- Order is rule-based (time, alphabetical) — no manual control needed
- Very long lists where cross-screen dragging loses the drop target
- Small touch targets on mobile where drags misfire
Variants
Whole item
整行拖动
Drag anywhere on the item, most direct
Handle
把手拖动
A six-dot handle constrains the drag zone, avoids scroll conflicts
Buttons
按钮排序
Move up/down buttons, keyboard and screen-reader friendly
Implementation
draggabletransformtransitioncursor-grabHTML5 drag: set draggable on items, record the source index on dragstart, preventDefault on dragover to compute the drop target, then reorder the array on drop. Touch devices need buttons or pointer events as fallback. Keep a translucent ghost at the origin and highlight the target row. Respect prefers-reduced-motion by snapping without transition.
Related concepts
A column-per-status task board — usually "To do / In progress / Done" — where cards move between columns as work advances. Column position is the process stage, a card's home is its status: the whole flow and its bottleneck column are visible at a glance.
PatternsSimilarThe text on the page is itself the editor: a click swaps it for an input in place, Enter or blur commits, Escape cancels — what you fix is what you see. It solves the overhead of a full edit page for tiny changes, driving the cost of a correction down to a single click, ideal for quick single-field revisions.
PatternsSimilarUpdate the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
PatternsSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed withA vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.
ComponentsUsed with