拖拽Drag
视觉效果与操作状态按住并移动对象完成排序或放置
拖拽常用于卡片排序和文件上传，过程中要显示正在拖什么、可以放到哪里。它对键盘、触屏和手部控制不稳定的用户并不方便，所以需要提供按钮等替代操作。
⠿ 任务 A
⠿ 任务 B
放到这里
按住卡片任意拖动，注意拖拽中的浮起阴影；松手弹回原位
什么时候用
- 拖拽中给反馈：被拖元素浮起 + 半透明，用户知道“拖着呢”任务 A任务 B（拖拽中）任务 C
- 目标位置占位：虚线框提前画出松手后会落在哪任务 A放到这里任务 C
- 提供替代操作：上移 / 下移按钮也能完成排序任务 B按钮也能完成排序
- 拖拽柄提示可拖：⠿ 手柄是最通用的“这里能拖”信号⠿任务 B
什么时候不用
- 拖了没反馈：元素不动、目标不亮，鬼知道拖没拖中任务 A任务 B
- 只能拖拽：没有按钮替代，键盘和触屏用户被关在门外想调整顺序？只能拖。键盘用户和触屏用户被关在门外。
- 触屏上硬做拖拽：和滚动手势打架，一滑全乱
- 整行都是拖拽热区：想选中文字，结果把整行拖走了⠿整行都是拖拽热区
组成结构 · Anatomy
⠿ 任务 B任务 B放到这里↑↓ 按钮替代
1拖拽柄Handle提示“能拖”，也圈定拖的热区
2拖拽影像Ghost跟着指针走的半透明分身
3目标占位Drop Slot松手后会落进去的位置
4替代操作Alternative按钮也能完成同样的事
常见变体 · Variants
列表排序Reorder
ABC
任务、看板拖动排序
拖放区域Drop Zone
拖文件到这里
文件拖进区域上传
拖拽手柄Handle
⠿ 任务 B
明确告诉用户这里能拖
典型使用场景
看板拖动任务卡
待办 · 1
接口联调
进行中 · 2
首页视觉走查
放到这一列
登录页改版
文件拖拽上传
📎 设计规范.md
⬆
松开鼠标，上传到「项目文件」
设计规范.md · 2.4 MB
列表拖拽排序
⠿ 写需求文档
放到这里
⠿ 评审视觉稿
⠿ 约客户访谈
调整面板宽度