Drag & Drop
拖拽排序
Press something, drag it to another position, and release — and it moves there.
Live Demo
Actually clickableWhat you just saw:Dragging a card to another column on a Kanban board, moving a sticky note in Trello, repositioning a layer in a design tool, reordering a todo list by dragging.
What it actually is
Drag and drop lets users manipulate two abstract things directly: order and membership. It must ship a non-drag alternative, because dragging demands fine motor control and not everyone knows items can be dragged.
Anatomy · What it's made of
Drag Handle拖拽把手
Shows the grab cursor on hover
Ghost拖影
Semi-transparent copy following the pointer
Drop Target放置区
Highlights to show the insertion point
Placeholder占位
Leaves a gap at the original position
Keyboard Alt键盘替代
Arrow keys to move once picked up
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Changing order or membership (boards, layers, rankings) | Yes |
| Spatial position itself carries meaning | Yes |
| A keyboard equivalent such as "Move to…" is provided | Yes |
| The ordering is purely cosmetic (users do not care about order) | No |
| You are just picking one option (a click is enough) | No |
Drag and drop carries a high accessibility cost: you must support both the keyboard (Space to pick up, arrow keys to move, Space to drop) and a "Move to…" menu.
Dragging on mobile has to handle auto-scroll and gesture conflicts, which makes it one of the hardest interactions to get right.
Similar Patterns
Don't mix these upDrag & DropCurrent
拖拽排序
Press something, drag it to another position, and release — and it moves there.
Swipe Action
滑动操作
Press a list item and slide it left, and actions like delete or archive slide out from underneath.
In one line:Press something, drag it to another position, and release — and it moves there.
Swipe Action
滑动操作
Press a list item and slide it left, and actions like delete or archive slide out from underneath.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
How to tell AI
Three levels of promptAdd the component name and specifics
Support drag-and-drop reordering: while dragging, leave a gap at the origin and show an insertion indicator line; on release, animate the item smoothly into its new position and update the underlying array order.
Don't just say this to AI
Bad → BetterDon't say this to AI
Support dragging to change the order.
Say this instead
Implement drag-and-drop reordering: only enter the dragging state past a 5px movement threshold so clicks still work, make the source element semi-transparent and show an insertion line at the target, settle the remaining items with a FLIP animation on drop, and add the keyboard path (Space to pick up, Up/Down to move, Space to drop, Esc to cancel).
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.