Drag & Drop
拖拽排序
WebMobileDesktop上手难度: 进阶
按住一个东西拖到另一个位置松手，就换过去了。
Live Demo
真的可以点设计首页
写文档
实现搜索
搭脚手架
定配色
你刚才看到的这个：看板 Kanban 里拖动卡片换列、Trello 拖动便签、设计工具里拖动图层、Todo App 里拖动重新排序。
它到底是什么
Drag & Drop 让用户直接操作「顺序」和「归属」这两件抽象的事。它必须提供非拖拽的替代方式——因为拖拽对手部精细动作有要求，也不是每个人都知道能拖。
拖拽drag and drop拖放拖动排序reorderdnd
Anatomy · 它由什么组成
Drag Handle拖拽把手
显示 hover 光标 grab
Ghost拖影
半透明跟随指针
Drop Target放置区
高亮显示插入位置
Placeholder占位
原位置留空隙
Keyboard Alt键盘替代
方向键移动
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 改变顺序或归属关系（看板、图层、排序） | 用 |
| 空间位置本身有含义 | 用 |
| 提供「移动到…」的键盘替代 | 用 |
| 仅为了美观排序（用户不在意顺序） | 不用 |
| 单选一个（用点击就够） | 不用 |
拖拽的可用性成本很高：必须同时支持键盘（Space 拿起 → 方向键移动 → Space 放下）和「移到」菜单。
移动端拖拽要处理自动滚动和手势冲突，是最难的交互之一。
Similar Patterns
别搞混一句话区分：按住一个东西拖到另一个位置松手，就换过去了。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
支持拖拽重新排序：拖动时原位留空隙并显示插入指示线，松手后平滑移动到新位置，并同步更新数组顺序。
不要只对 AI 说
Bad → Better不要这样对 AI 说
支持拖动改变顺序。
改成这样说
实现拖拽排序：move 超过 5px 阈值才进入拖拽态避免和点击冲突，源元素半透明、目标位置显示插入指示线，落下后用 FLIP 动画平滑归位，并补 Space 拿起 / ↑↓ 移动 / 放下 / Esc 取消的键盘方案。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。