拖放 Drag and Drop

指用户通过鼠标或其他指向设备,选择一个或多个对象,将其拖放到界面中某个目标区域内

    应用案例

    • 任务板卡片拖放

    • 自定义字段排序

    • 部门排序

    通用原则

    • 拖放操作通常涉及:

      • 拖拽对象:可被拖拽的元素,如列表、卡片等

      • 目标区域:接收拖拽对象的区域

      • 拖放指示器:用于告知用户对象将要着陆的位置

    • 当用户将对象拖拽至容器边缘时,可以激活纵向或横向的自动滚动,让用户更便捷地触达目标区域

    • 如果可能的话,使拖放操作可逆。 有时,用户可能会无意中将内容拖到错误的目的地。 当这种情况发生时,理想情况下用户应该能够使用撤销将内容恢复到其先前的位置。

    • 请遵循以下规范设置鼠标指针

    拖拽事件

    事件 用户行为 描述
    Hover 用户将光标移动到对象的拖拽响应区域 把手图标高亮
    Focus 用户使用键盘快捷键使对象进入 focus 状态 把手图标高亮,描边出现
    DragStart 用户按住鼠标 对象被抬起,投影与描边出现
    On Dragging 用户按住并移动鼠标 对象正在被拖拽
    DragLeave 用户按住鼠标将对象移出原始区域 对象被拖拽出了原始区域
    DragEnter 用户按住鼠标将对象移入目标区域 对象被拖拽进入目标区域
    Drop 用户松开鼠标 对象被放开,高亮动效出现

    拖拽把手

    • 应尽可能地默认显示把手

    • 因元素空间不足或为了减少界面冗余度可通过 hover 状态来展示把手

    • 某些特定组件可以不显示把手(如任务卡片,本身即具有便利贴的隐喻且用户习惯已形成,交互可见性较强)

    初始区域与目标区域

    初始区域

    指在拖拽交互开始前,对象所占有的初始区域,当对象离开该区域时,即触发 Drag Leave 事件,其具有两种样式:

    样式 A:当对象内容非常重要,需要对用户保持可见时可选用。仅降低透明度不干扰原有内容

    样式 B:当对象内容不需要始终保持可见时可选用,减少视觉元素冗余

    目标区域

    指对象可能被拖拽并完成放置的区域,在一个页面中可以存在多个目标区域。其样式依据事件不同而有所不同:

    默认标识样式:默认即可见的样式,常用于如文件上传等场景,让用户提前明确目标区域的位置和范围,见上图左侧

    • 说明文字:需要在区域内添加,仅靠容器样式无法清晰解释用途

    事件激活样式:将元素拖动到有效的目标区域将激活该样式(见上图右侧)。分为卡片式、列表式两种

    • 说明文字:卡片式依据场景需求来判断是否需要,列表式无需文字

    多对象拖放

    在被拖拽对象的右上角使用 Badge 组件来显示被拖拽对象的数量。进入多对象拖拽的方式有:

    • 直接在每个条目上提供多选功能

    • 提供统一的编辑/管理入口,用户主动激活编辑状态来多选条目

    选择多个条目后,拖拽其中任意一个即进入多对象拖拽状态。

    无障碍设计

    键盘操作规则

    • tabshift+tab 来切换对象,使其进入 Focus 状态

    • space 来抬起或放下一个对象

    • jarrow down 来使抬起的对象下移一个层级

    • karrow up 来使抬起的对象上移一个层级

    • escape 来取消抬起与移动,使对象复原至初始位置

    参考

    https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/multi-drag.md

    https://github.com/vmware/clarity/issues/1771

    https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/mouse-and-trackpad/#pointers

    相关语汇:拖拽、拖放、拖、抓手、抓起、移动