Drag and Drop
拖放
Aliases:拖放拖拽移动拖过去拖到那边拖来拖去drag and dropdnddrag to move
What is it
Move an object to a new slot or container by press-drag-release direct manipulation. It is spatial and immediate, closer to intuition than menu commands; a clear drop indicator and an accepting target are required while dragging. Broader than mere reordering — moving, filing and cross-list delivery all count.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Objects move between containers or slots — filing, sorting assets
- Spatial position carries meaning — kanban columns, canvas, grid layouts
- Pointer-first audiences for whom dragging is a natural gesture
✕ When not to use
- Reordering only — drag-to-sort or move buttons are more precise
- Drop targets off-screen — mis-drops become likely
- Keyboard/screen-reader-first flows with no button fallback
Variants
Drag to move
拖动移动
Drag an object to a new slot or container — the general case
Drag to reorder
拖动排序
Swap places inside one list; neighbours give way live
Drag between lists
跨列表拖放
Drag from a source list into a target list, leaving a ghost behind
Implementation
cursor-grabtransform: translateopacitytransitionpointer-eventsHTML5 drag uses draggable plus dragstart / dragover / drop; touch devices do not support it, so fall back to Pointer Events or buttons. Keep a translucent ghost at the origin and highlight the target with a drop line. Update the data source on drop, with optimistic rollback if needed. Respect prefers-reduced-motion — snap into place without transition.
Platform API
draggabledropPointer EventsRelated concepts
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.
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.
PatternsUsed withA 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.
PatternsUsed with