拖拽Drag
你可能会说
这些卡片希望能按住拖动，换个顺序。
拖拽是一种按住元素并移动它的位置或把它放到目标区域的交互方式调整任务卡顺序、把文件拖进上传区时会用到 drag；过程中应显示被拖元素、可放置区域和落点占位。拖拽对键盘、触屏和手部操作不稳定的用户并不可靠，因此排序要提供上移下移等替代操作，上传也要保留文件选择按钮。
什么时候用
- 拖拽中给反馈：被拖元素浮起 + 半透明，用户知道“拖着呢”任务 A任务 B（拖拽中）任务 C
- 目标位置占位：虚线框提前画出松手后会落在哪任务 A放到这里任务 C
- 提供替代操作：上移 / 下移按钮也能完成排序任务 B按钮也能完成排序
- 拖拽手柄提示入口：⠿ 可说明从哪里开始拖动⠿任务 B
什么时候不用
- 拖拽没有反馈：元素状态和目标区域都不变化，用户无法确认是否抓取成功任务 A任务 B
- 只能拖拽：没有按钮或菜单替代，键盘用户和无法精确拖动的用户不能完成操作只提供拖拽，会让键盘用户和无法精确拖动的用户无法完成排序。
- 触屏拖拽未处理手势冲突：页面滚动与拖动会相互抢占
- 整行都是拖拽热区：想选中文字，结果把整行拖走了⠿整行都是拖拽热区
组成结构 · Anatomy
⠿ 任务 B任务 B放到这里↑↓ 按钮替代
提示“能拖”，也圈定拖的热区
跟着指针走的半透明分身
松手后会落进去的位置
按钮也能完成同样的事
常见变体 · Variants
列表排序Reorder
ABC
任务、看板拖动排序
拖放区域Drop Zone
拖文件到这里
文件拖进区域上传
拖拽手柄Handle
⠿ 任务 B
需要明确标出可开始拖动的位置
典型使用场景
看板拖动任务卡
待办 · 1
接口联调
进行中 · 2
首页视觉走查
放到这一列
登录页改版
文件拖拽上传
📎 设计规范.md
⬆
松开鼠标，上传到「项目文件」
设计规范.md · 2.4 MB
列表拖拽排序
⠿ 写需求文档
放到这里
⠿ 评审视觉稿
⠿ 约客户访谈
调整面板宽度
延伸阅读 · 权威出处