拖拽排序

Drag to Reorder

交互模式也叫：拖动排序、拖拽调整顺序、Sortable

一句话：按住列表项拖到新位置再松开就能调整顺序，常用于待办事项、菜单配置、图片顺序的调整。

详细解释

拖拽排序是拖放的一种特殊情况：拖动和放下都发生在同一个列表里，目的是改变顺序。常见于待办清单、导航菜单配置、相册排序、看板同一列里的卡片排序。

做好拖拽排序要注意几个细节：每项加一个「拖拽手柄」图标（六个点或三条横线），提示这里可以拖；拖动时被拖的项加阴影或半透明，原位置留出虚线空位；其他项平滑让位。松开后把新顺序保存到后端，失败时恢复原顺序。

手机上通常长按才开始拖，避免和页面滚动冲突。最好再提供「上移 / 下移」按钮或键盘操作作为替代。常用的库有 dnd-kit、SortableJS。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

待办列表支持拖拽排序：每行左侧加六个点的拖拽手柄，只有按住手柄才能拖；拖动时该行加阴影、原位置显示虚线占位，其他行平滑让位；松开后调用接口保存新顺序，失败则恢复原顺序并提示。