交互模式 · 拖拽
拖拽排序
Drag to Reorder
也叫:拖动排序、拖拽调整顺序、Sortable
按住列表项拖到新位置再松开就能调整顺序,常用于待办事项、菜单配置、图片顺序的调整。
详细解释
拖拽排序是拖放的一种特殊情况:拖动和放下都发生在同一个列表里,目的是改变顺序。常见于待办清单、导航菜单配置、相册排序、看板同一列里的卡片排序。
做好拖拽排序要注意几个细节:每项加一个「拖拽手柄」图标(六个点或三条横线),提示这里可以拖;拖动时被拖的项加阴影或半透明,原位置留出虚线空位;其他项平滑让位。松开后把新顺序保存到后端,失败时恢复原顺序。
手机上通常长按才开始拖,避免和页面滚动冲突。最好再提供「上移 / 下移」按钮或键盘操作作为替代。常用的库有 dnd-kit、SortableJS。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
interaction-drag-sort- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29