拖拽排序要解决的不是“让条目动起来”,而是让用户知道哪一项能移动、会放到哪里、松手后是否生效,以及不方便拖动时怎样完成同样的操作。只有漂亮动画,没有位置和结果反馈,排序仍然容易出错。
以课程章节重排为例,可以先在墨刀原型中走通排序操作,把移动前、选择位置、保存成功与冲突分别表达清楚。原型负责验证行为和文案,真正的拖拽实现与服务端顺序保存由研发完成。

先确定“顺序”到底改变什么
同样是移动一行,含义可能完全不同:调整课程展示顺序、改变任务优先级、移动到另一个状态,或者只改变当前用户的视图。设计前必须说明对象和影响范围,不能把所有动作都叫“拖一下”。
本例只有一件事:教师把“练习与复盘”从第五章移到第三章,改变学员看到的章节顺序,不改变章节内容,也不改变发布状态。若某章必须在前置课程之后学习,需要在移动前后验证依赖,而不是只看列表位置是否合法。
当列表按创建时间自动排序时,手动排序可能不生效。应先区分“按时间排序”和“自定义顺序”,不要让用户成功拖完以后,页面刷新又恢复旧顺序却没有解释。搜索或筛选后的局部列表也一样:移动当前可见条目,究竟怎样影响完整列表,需要单独约定。
例如完整顺序是A、B、C、D,搜索后只剩B和D。把D移到B之前,可以意味着完整顺序变成A、D、B、C,也可能被理解成只交换两项得到A、D、C、B。这两种结果并不等价。如果业务没有明确需求,排序时暂时要求清除筛选,通常比悄悄选择一种解释更容易理解;若确实需要局部重排,应预览目标相邻项和完整顺序中的位置。
用稳定手柄表达可移动性
手柄应容易识别,最好位于每行同一侧,并与勾选框、展开按钮和更多菜单分开。整行既可以点开详情又可以拖动时,要定义触发区域,防止用户想打开章节却开始移动。
移动端需要考虑滚动与拖动的冲突。长按启动、独立手柄或进入排序模式都可作为方案,但不能只依靠提示文字让用户猜。可拖区域、触摸目标和反馈需要在真实设备上验证,桌面鼠标操作顺畅不能证明手机同样易用。
不是所有条目都可以拖动。固定的“课程介绍”或已被权限锁定的章节,应有明确解释。完全不提供入口,适合用户根本无权操作的场景;显示禁用状态,则需要说明为什么当前不能移动。
有层级的章节还要区分同级排序与跨组移动。横向偏移是否会改变父级,移动章节时子课时是否一起移动,折叠组是否允许接收条目,都不能靠动画暗示。若本期只支持同级重排,就把可落区域限制在同一组;跨组移动可以另设明确的“移至章节”操作,避免一次手势同时改顺序和归属。
开始移动后,让落点先于结果出现
用户抓起条目时,保留清楚的原位置或占位,移动对象与其他行拉开视觉层次。经过候选位置时,显示插入线或占位区域,并让周围内容作可预测的让位,避免一边移动一边失去参照。
落点文案最好描述相邻对象,例如“移到‘基础练习’之后”,比单写“第三位”更容易理解。列表很长时,需要考虑靠近边缘的自动滚动,但滚动速度不能快到用户无法控制;还要明确怎样取消这次移动。
| 阶段 | 用户需要看懂 | 页面反馈 |
|---|---|---|
| 移动前 | 哪些条目可以排序 | 手柄、排序模式和范围说明 |
| 移动中 | 当前拿着哪一项,准备放哪里 | 条目高亮、原位置占位、目标落点 |
| 落点不可用 | 为什么不能放在这里 | 限制原因,不用单靠红色表达 |
| 松手后 | 新位置是否已经保存 | 处理中、成功或失败提示 |
| 取消 | 是否回到移动前的顺序 | 恢复原位置,焦点仍可找到该项 |

保留不需要拖动的完成方式
“上移”“下移”适合少量相邻调整;长列表可提供“移动到……”并选择目标章节前后;经常需要大量调整时,也可以进入专门的排序界面。它们不只是无障碍补丁,也能帮助触屏操作不精确、窗口狭窄或不想拖很远的用户。
W3C 的拖动动作说明要求相关功能有不需要拖动的单指针操作方式,键盘可操作性则是另一项需要分别处理的要求。因此“支持键盘快捷键”不能自动代替“能用点击完成移动”。
键盘路径要让人能找到条目、进入移动操作、选择位置并确认或取消。顺序变化后应通知结果,并维持可理解的焦点位置。若依赖自定义快捷键,界面应解释用法,不能要求读者先掌握开发者心中的组合键。
保存失败和多人冲突需要明确结局
一种方案是移动后立即保存,另一种是多次调整后点击“保存顺序”。前者步骤少,但每次变更都有可能失败;后者更适合集中编辑,不过必须持续提示未保存状态,并定义离开时如何处理。不要同一个列表里混用两种规则。
即时保存时,可先展示新位置并标记保存中。失败后,要么恢复旧顺序并解释原因,要么保留待保存结果并提供重试;不能画面停在新位置,刷新后才让用户发现没有生效。批量保存则应清楚区分已保存和本地未保存。
另一位教师同时改了顺序,或者目标章节被删除时,不能静默覆盖对方结果。产品可选择刷新后重新调整、显示冲突差异或采用团队规定的合并策略,具体由协作机制决定。原型至少要表达冲突提示和下一步,不必伪造一套尚未存在的自动合并能力。
给研发的排序说明应包含这些内容
- 排序影响全部用户还是当前用户,范围是整个课程还是当前筛选结果。
- 哪些条目固定、哪些存在前后依赖、谁可以调整。
- 进入移动、取消、不可用落点、边缘滚动和落点确认的反馈。
- 保存时机、失败处理、并发冲突和页面刷新后的结果。
- 点击与键盘的替代路径,以及完成后的焦点和消息。
评审时请分别用鼠标拖动、仅点击菜单和键盘完成同一个重排任务。再试目标被删除、请求失败、列表筛选变化三个情况。若这些路径最终都能解释清楚“章节现在在哪里”,排序交互才算交代完整。