返回知识库

产品与设计 · 交互状态与指针

拖拽Drag

通过拖动或等价按钮/键盘改变位置,并把抓取态、目标位、保存结果和失败回位都做在物件上。

先抓取、移动、放下,再试一次保存失败

鼠标拖动不是唯一入口。在这台清单里用按钮或键盘完成抓取 → 移动 → 放下,看位置编号、目标位和保存结果如何落在每一行上;勾选「模拟保存失败」再放下,观察物件如何回位。

发布检查清单 · 键盘等价拖拽

鼠标能拖,键盘也能:点「抓取」或 Tab 到它按 Enter 抓取,↑↓ 移动(目标位跟着走),Enter 放下保存,Esc 取消。每项还配「上移 / 下移」按钮做一步等价。 勾选「模拟保存失败」再放下,看物件如何回位。

  1. 研究需求
  2. 设计方案
  3. 发布检查
  4. 收集反馈

用按钮或键盘完成排序:Tab 到「抓取」按 Enter,↑↓ 移动,Enter 放下;勾选「模拟保存失败」再放下,看物件如何回位。每一步的原因、结果和下一步都写在列表项的徽章上。

从刚才的操作里提炼

你在实验台上看到的就是拖拽的合格边界。

  • 拖拽改的是位置:方向键或上移/下移按钮一旦生效,行的位置编号和顺序立即变化——这是拖拽唯一改的东西。
  • 必须有键盘等价(WCAG 2.5.7):抓取、移动、放下都能用 Enter + 方向键完成;鼠标拖动不能是唯一入口。
  • 抓取态要可见可读:被抓行带 ● 抓取中 文字、边框,并设 aria-pressed / aria-current,不靠指针图标独撑。
  • 目标位用文字标出:被抓行显示「释放落到第 N 位」和实时编号,目标位高亮不是只有颜色。
  • 结果长在物件上:放下后行上出现 ✓ 已保存 / × 失败回位,位置编号同步更新——不只是页脚 status 换一句。
  • 边界与回位:到顶/到底按钮 disabled 并说明;Esc 取消、保存失败回位都让顺序不丢失,焦点和顺序在操作后保持稳定。

什么时候关注拖拽的等价操作

从用户信号判断,也要知道它不该是唯一入口。

  • 用:用户需要自行调整顺序或分组(看板换列、清单排序、字段排布)时,拖拽是高效的指针快捷方式。
  • 用:同时提供按钮或键盘等价路径,让不能用鼠标的人、读屏用户和窄屏触控用户都能完成同一任务。
  • 区分:拖拽改变位置,hover 改指针反馈、focus 改键盘位置——三者视觉可以相似,触发时机和语义不同。
  • 不用:把拖拽做成唯一入口;只用 cursor: grab 暗示可拖,却没有按钮、键盘路径和目标位说明。

怎么用:从抓取到回位的最短路径

让一次拖拽有完整的抓取、可见目标、提交结果和回退出口。

  1. 每项提供抓取按钮(aria-pressed)和上移/下移按钮;鼠标点击与键盘 Enter/Space + 方向键走同一条逻辑。
  2. 抓取时给行加文字 + 边框 + aria-current,并显示「释放落到第 N 位」和实时位置编号,目标位不靠颜色独撑。
  3. 放下时尝试保存:成功在行上落 ✓ 已保存;失败用快照把顺序回位并落 × 失败徽章,aria-live 同步说明原因。
  4. 提供 Esc 取消、到顶/到底 disabled 与重置;操作后焦点仍在被抓项,顺序不丢失。

正反例:同一排序任务,只改一处

围绕同一个排序动作,只改变「除了鼠标还有没有等价路径」,看用户后果如何不同。

正例按钮 + 键盘等价,目标位与结果都可见

每项有抓取/上移/下移按钮:Enter 抓取、方向键移动、Enter 放下;被抓行用文字、位置编号和边框标出目标位, 保存失败物件回位——键盘和读屏用户也能完成排序。

反例只有鼠标拖动,指针变 grab 是唯一线索

没有按钮也没有键盘路径,抓取态和目标位只靠指针图标和颜色暗示;键盘用户无法排序,读屏听不到位置变化, 保存失败时顺序直接丢失。

快速自测

一个可拖拽排序的看板目前只做了鼠标拖动,没有按钮也没有键盘路径。先补哪一项?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。