应用案例
-
任务板卡片拖放
-
自定义字段排序
-
部门排序
通用原则
-
拖放操作通常涉及:
-
拖拽对象：可被拖拽的元素，如列表、卡片等
-
目标区域：接收拖拽对象的区域
-
拖放指示器：用于告知用户对象将要着陆的位置
-
-
当用户将对象拖拽至容器边缘时，可以激活纵向或横向的自动滚动，让用户更便捷地触达目标区域
-
如果可能的话，使拖放操作可逆。 有时，用户可能会无意中将内容拖到错误的目的地。 当这种情况发生时，理想情况下用户应该能够使用撤销将内容恢复到其先前的位置。
-
请遵循以下规范设置鼠标指针
拖拽事件
| 事件 | 用户行为 | 描述 |
|---|---|---|
| Hover | 用户将光标移动到对象的拖拽响应区域 | 把手图标高亮 |
| Focus | 用户使用键盘快捷键使对象进入 focus 状态 | 把手图标高亮，描边出现 |
| DragStart | 用户按住鼠标 | 对象被抬起，投影与描边出现 |
| On Dragging | 用户按住并移动鼠标 | 对象正在被拖拽 |
| DragLeave | 用户按住鼠标将对象移出原始区域 | 对象被拖拽出了原始区域 |
| DragEnter | 用户按住鼠标将对象移入目标区域 | 对象被拖拽进入目标区域 |
| Drop | 用户松开鼠标 | 对象被放开，高亮动效出现 |
拖拽把手
-
应尽可能地默认显示把手
-
因元素空间不足或为了减少界面冗余度可通过 hover 状态来展示把手
-
某些特定组件可以不显示把手（如任务卡片，本身即具有便利贴的隐喻且用户习惯已形成，交互可见性较强）
初始区域与目标区域
初始区域
指在拖拽交互开始前，对象所占有的初始区域，当对象离开该区域时，即触发 Drag Leave 事件，其具有两种样式：
样式 A：当对象内容非常重要，需要对用户保持可见时可选用。仅降低透明度不干扰原有内容
样式 B：当对象内容不需要始终保持可见时可选用，减少视觉元素冗余
目标区域
指对象可能被拖拽并完成放置的区域，在一个页面中可以存在多个目标区域。其样式依据事件不同而有所不同：
默认标识样式：默认即可见的样式，常用于如文件上传等场景，让用户提前明确目标区域的位置和范围，见上图左侧
- 说明文字：需要在区域内添加，仅靠容器样式无法清晰解释用途
事件激活样式：将元素拖动到有效的目标区域将激活该样式（见上图右侧）。分为卡片式、列表式两种
- 说明文字：卡片式依据场景需求来判断是否需要，列表式无需文字
多对象拖放
在被拖拽对象的右上角使用 Badge 组件来显示被拖拽对象的数量。进入多对象拖拽的方式有：
-
直接在每个条目上提供多选功能
-
提供统一的编辑/管理入口，用户主动激活编辑状态来多选条目
选择多个条目后，拖拽其中任意一个即进入多对象拖拽状态。
无障碍设计
键盘操作规则
-
tab和shift+tab来切换对象，使其进入 Focus 状态 -
space来抬起或放下一个对象 -
j或arrow down来使抬起的对象下移一个层级 -
k或arrow up来使抬起的对象上移一个层级 -
escape来取消抬起与移动，使对象复原至初始位置
参考
https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/multi-drag.md
https://github.com/vmware/clarity/issues/1771
相关语汇：拖拽、拖放、拖、抓手、抓起、移动
