拖拽排序
Drag & Drop Sorting
别名:拖拽排序拖动调整顺序拖动排序上下移动排序拖拽换位置拖放排列
这是什么
用直接拖动的方式调整列表项的先后顺序：按住条目（或把手）拖到目标位置，其余条目实时让位并给出落点提示。 它把"排序"从抽象的上下移按钮变成所见即所得的空间操作，同时保留按钮作为可达性兜底。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 用户需要自由决定条目顺序（播放列表、任务清单、栏目配置）
- 列表项数量适中，一屏内能看清全局
- 顺序调整频繁，按钮逐级移动太低效
✕ 不适用场景
- 顺序由规则决定（按时间、按字母），无需手动调
- 列表很长且跨屏拖动容易迷失落点
- 主要用户在触屏上且行高太小，拖拽误触率高
常见形式
整行拖动
Whole item
按条目任意位置拖，最直接
把手拖动
Handle
六点把手限定拖拽区，避免与滚动冲突
按钮排序
Buttons
上移/下移按钮，键盘与读屏友好
实现要点
draggabletransformtransitioncursor-grabHTML5 拖拽：条目设 draggable，dragstart 记录来源索引，dragover 阻止默认并计算落点，drop 时 重排数组。触屏不支持 HTML5 DnD，需按钮或指针事件兜底。拖动中给原位置留半透明占位， 目标行高亮。尊重 prefers-reduced-motion，交换动画退化为直接落位。
相关概念
按状态分列的任务面板—— 通常"待办 / 进行中 / 已完成"三列， 卡片随状态推进在列间移动。 列的位置即流程阶段， 卡片的所在即任务状态， 一眼看清全局进展与瓶颈列。
交互模式相似概念页面上的文本本身即可编辑：单击把文本原位变成输入框，Enter 或失焦确认，Esc 取消， 改完所见即所得。它解决的是"小改动也要跳转完整编辑页"的问题—— 把修改成本降到一次点击，特别适合单字段的快速修订场景。
交互模式相似概念用户操作后立即按"预计成功"更新界面，真实请求在后台进行，成功则落定， 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感，特别适合点赞、收藏这类高频轻操作。
交互模式相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件搭配使用由多个可折叠区块组成的垂直列表：点击标题展开内容、再点收起，可互斥（同时只开一项） 也可多开。用于在有限空间里收纳成组内容，让用户按需展开。
组件搭配使用