放下前能认出目标;条件不满足时卡片留在原列并说明原因;修复后再试,成功卡进入新列。
产品与设计 · 交互状态与指针
拖拽Drag
拖拽通过移动真实物件改变位置;目标列、成功放下、失败回位与修复条件都应留在物件上,并提供不依赖鼠标的等价路径。
先把发布检查拖进目标列
完成这条短任务:开始拖动 → 试着放下 → 看失败回到卡片上 → 修复测试 → 再拖一次成功。
发布看板 · 一次真实的拖放
拖动「发布检查」到「准备发布」。也可 Tab 聚焦卡片,按 Enter 抓取,用 ←/→ 选列,再按 Enter 放下。
拖到这里放下
任务:把「发布检查」从「检查中」拖到「准备发布」。先试一次:兼容性测试还没有通过。
从刚才的看板里提炼
- 拖拽改变的是物件位置。卡片从一个列移动到另一个列,目标列和原列共同说明它去了哪里。
- 放下是有条件的动作。不是松开鼠标就算成功;未通过测试时卡片回到检查列,原因写在卡片上。
- 键盘是同一条任务路径。
Enter或空格抓取,← →选择列,再按Enter放下,Esc取消。 - 结果必须靠近物件。成功印记、失败回位与测试通过状态都长在相应卡片上;live 文本只补充原因和下一步。
什么时候用拖拽
- 用户在看板、任务清单、文件夹或版面里需要直接调整物件的顺序、分组或位置时。
- 位置本身能帮助判断工作流,例如哪项还在检查、哪项可以发布时。
- 不要把拖拽做成唯一入口:触摸、键盘和辅助技术都需要完成同一移动。
- 如果移动并不表达空间关系,用明确按钮或菜单通常更快、更不容易误操作。
怎么用:给每一次拖放留证据
- 让卡片和目标列在默认状态就说清“是什么、能放哪里”。
- 开始移动时保留被抓取物件和可读的目标提示;不要只改鼠标指针。
- 放下后把新位置、拒绝原因或成功结果写回卡片;失败时恢复到可理解的原位。
- 给出键盘等价、取消与可恢复路径,再在 390px 窄屏验证目标列仍可触达。
正反例:同一个发布看板,只差一条反馈链
不知道能否放下,失败后卡片消失或悄悄跳回;键盘用户没有等价路径,也无法确认当前位置。
快速自测
一个看板允许鼠标把卡拖进“已发布”,但没通过检查时卡片悄悄弹回。最先补什么?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。