React 拖拽排序怎么做React SortableJS 从 5 分钟跑通到看板实战【免费下载链接】openprojectOpenProject is the leading open source project management software for product, project and portfolio management. A powerful Jira alternative with agile planning, issue tracking, roadmaps, Gantt charts, time tracking, collaboration features, and more. Available on premises or in the cloud. ⭐ Star us on GitHub项目地址: https://gitcode.com/GitHub_Trending/op/openproject做过后台的同学大概率都被提过这种需求看板里的卡片要在待办和进行中之间来回拖运营还想自己调整首页模块的顺序。原生 HTML5 拖拽事件要自己算坐标、管占位符、处理动画写起来又长又容易出 bug。React SortableJS 的思路是底层用 SortableJS 直接操作 DOM 完成拖拽拖完后把新顺序同步回 React 状态你只管渲染列表顺序由list这个数组说了算。 5 分钟跑通第一个可拖拽列表先装依赖npm install react-sortablejs sortablejs npm install -D types/sortablejs然后写一个最小示例核心就两个 propslist传数组setList传 setStateimport { useState } from react; import { ReactSortable } from react-sortablejs; export default function TodoList() { const [todos, setTodos] useState([ { id: 1, text: 写周报 }, { id: 2, text: 评审接口文档 }, { id: 3, text: 修线上 bug }, ]); return ( ReactSortable list{todos} setList{setTodos} animation{150} {todos.map(t ( div key{t.id}{t.text}/div ))} /ReactSortable ); }拖完松手setTodos自动收到重排后的数组刷新一下页面发现顺序没变那就是没调接口持久化后文会讲。 跨列看板让卡片在列之间自由迁移业务诉求卡片不只是列内排序还要能从待办拖进进行中。关键点只有一个——给每列的ReactSortable配上相同的group名列间互相允许拉取和放入ReactSortable list{pending} setList{setPending} group{{ name: tasks, pull: true, put: true }} // 同名 group 才能互拖 animation{150} scroll{true} // 拖到列表边缘时自动滚动 scrollSensitivity{30} {pending.map(t ( TaskCard key{t.id} task{t} / ))} /ReactSortable三列写三个这样的组件卡片就能在列间自由迁移。两个细节值得注意group的pull控制允许从本列拖出put控制允许放进本列。想做只读列比如归档把pull: false即可。scroll: true解决长列表拖拽的经典痛点卡片拖到容器边缘时列表自动滚动用户不用两只手配合鼠标和滚轮。 批量多选与交换模式两种不同的拖法有些场景插入排序并不是用户想要的。两种替代拖法交换模式拖 A 到 B 上两者互换位置其余项纹丝不动。适合固定槽位的布局比如导航菜单、首页模块配置。import { Sortable, Swap } from react-sortablejs; Sortable.mount(new Swap()); // 挂载插件全局执行一次 ReactSortable list{navItems} setList{setNavItems} swap swapClassnav-swap-highlight onSwap{(e) console.log(e.oldIndex, 和, e.newIndex, 互换了)} {navItems.map(i ( div key{i.id}{i.title}/div ))} /ReactSortable多选拖拽按住 Shift/Ctrl 点选多张卡片再一起拖适合把 10 条工单一次性挪到另一列这种批量操作。同样先Sortable.mount(new MultiDrag())再给ReactSortable加multiDrag属性配合selectedClass高亮被选中的项。两个插件都是 SortableJS 官方的react-sortablejs只是转发挂载方式一致。⚡️ 列表超过 50 项不卡顿的三个参数列表很长几百上千行时最常见的抱怨是拖拽掉帧、页面乱闪。按下面的清单对症处理现象拖长列表时整页重渲染掉帧→ 原因setList触发状态更新列表里每项都跟着重算 → 解法把行组件用React.memo包一层行内回调用useCallback固定引用。现象触屏/老旧浏览器拖拽闪烁、卡顿→ 原因浏览器原生拖拽 API 兼容性差 → 解法加forceFallback强制走 CSS transform 的自绘拖拽视觉更稳。现象拖拽过程中频繁触发网络请求→ 原因把setList当成了保存钩子 → 解法排序只改本地 state在onEnd事件里再防抖调接口避免拖一半就提交。现象拖完出现重复项或丢项→ 原因key用了数组下标或重复 id → 解法key 必须用后端稳定 id永远别用index。现象移动端误触点击也触发拖拽→ 原因触摸即开始拖 → 解法delay{200}delayOnTouchOnly按住一小段时间再进入拖拽。最后别忘了持久化setList只改前端数组刷新即还原。在onEnd里把新顺序通常是 id 数组提交到后端才是完整闭环。收尾什么时候该用它选型一句话需求是单列排序或跨列看板项数量在几百以内React SortableJS 是最省心的选择两个 props 就能跑。如果要做嵌套无限层级的树形拖拽、或每行带复杂交互的表格排序建议先评估 frontend/src/common/drag-and-drop 这类自研方案的维护成本再决定要不要自己造轮子。【免费下载链接】openprojectOpenProject is the leading open source project management software for product, project and portfolio management. A powerful Jira alternative with agile planning, issue tracking, roadmaps, Gantt charts, time tracking, collaboration features, and more. Available on premises or in the cloud. ⭐ Star us on GitHub项目地址: https://gitcode.com/GitHub_Trending/op/openproject创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React 拖拽排序怎么做？React SortableJS 从 5 分钟跑通到看板实战
React 拖拽排序怎么做React SortableJS 从 5 分钟跑通到看板实战【免费下载链接】openprojectOpenProject is the leading open source project management software for product, project and portfolio management. A powerful Jira alternative with agile planning, issue tracking, roadmaps, Gantt charts, time tracking, collaboration features, and more. Available on premises or in the cloud. ⭐ Star us on GitHub项目地址: https://gitcode.com/GitHub_Trending/op/openproject做过后台的同学大概率都被提过这种需求看板里的卡片要在待办和进行中之间来回拖运营还想自己调整首页模块的顺序。原生 HTML5 拖拽事件要自己算坐标、管占位符、处理动画写起来又长又容易出 bug。React SortableJS 的思路是底层用 SortableJS 直接操作 DOM 完成拖拽拖完后把新顺序同步回 React 状态你只管渲染列表顺序由list这个数组说了算。 5 分钟跑通第一个可拖拽列表先装依赖npm install react-sortablejs sortablejs npm install -D types/sortablejs然后写一个最小示例核心就两个 propslist传数组setList传 setStateimport { useState } from react; import { ReactSortable } from react-sortablejs; export default function TodoList() { const [todos, setTodos] useState([ { id: 1, text: 写周报 }, { id: 2, text: 评审接口文档 }, { id: 3, text: 修线上 bug }, ]); return ( ReactSortable list{todos} setList{setTodos} animation{150} {todos.map(t ( div key{t.id}{t.text}/div ))} /ReactSortable ); }拖完松手setTodos自动收到重排后的数组刷新一下页面发现顺序没变那就是没调接口持久化后文会讲。 跨列看板让卡片在列之间自由迁移业务诉求卡片不只是列内排序还要能从待办拖进进行中。关键点只有一个——给每列的ReactSortable配上相同的group名列间互相允许拉取和放入ReactSortable list{pending} setList{setPending} group{{ name: tasks, pull: true, put: true }} // 同名 group 才能互拖 animation{150} scroll{true} // 拖到列表边缘时自动滚动 scrollSensitivity{30} {pending.map(t ( TaskCard key{t.id} task{t} / ))} /ReactSortable三列写三个这样的组件卡片就能在列间自由迁移。两个细节值得注意group的pull控制允许从本列拖出put控制允许放进本列。想做只读列比如归档把pull: false即可。scroll: true解决长列表拖拽的经典痛点卡片拖到容器边缘时列表自动滚动用户不用两只手配合鼠标和滚轮。 批量多选与交换模式两种不同的拖法有些场景插入排序并不是用户想要的。两种替代拖法交换模式拖 A 到 B 上两者互换位置其余项纹丝不动。适合固定槽位的布局比如导航菜单、首页模块配置。import { Sortable, Swap } from react-sortablejs; Sortable.mount(new Swap()); // 挂载插件全局执行一次 ReactSortable list{navItems} setList{setNavItems} swap swapClassnav-swap-highlight onSwap{(e) console.log(e.oldIndex, 和, e.newIndex, 互换了)} {navItems.map(i ( div key{i.id}{i.title}/div ))} /ReactSortable多选拖拽按住 Shift/Ctrl 点选多张卡片再一起拖适合把 10 条工单一次性挪到另一列这种批量操作。同样先Sortable.mount(new MultiDrag())再给ReactSortable加multiDrag属性配合selectedClass高亮被选中的项。两个插件都是 SortableJS 官方的react-sortablejs只是转发挂载方式一致。⚡️ 列表超过 50 项不卡顿的三个参数列表很长几百上千行时最常见的抱怨是拖拽掉帧、页面乱闪。按下面的清单对症处理现象拖长列表时整页重渲染掉帧→ 原因setList触发状态更新列表里每项都跟着重算 → 解法把行组件用React.memo包一层行内回调用useCallback固定引用。现象触屏/老旧浏览器拖拽闪烁、卡顿→ 原因浏览器原生拖拽 API 兼容性差 → 解法加forceFallback强制走 CSS transform 的自绘拖拽视觉更稳。现象拖拽过程中频繁触发网络请求→ 原因把setList当成了保存钩子 → 解法排序只改本地 state在onEnd事件里再防抖调接口避免拖一半就提交。现象拖完出现重复项或丢项→ 原因key用了数组下标或重复 id → 解法key 必须用后端稳定 id永远别用index。现象移动端误触点击也触发拖拽→ 原因触摸即开始拖 → 解法delay{200}delayOnTouchOnly按住一小段时间再进入拖拽。最后别忘了持久化setList只改前端数组刷新即还原。在onEnd里把新顺序通常是 id 数组提交到后端才是完整闭环。收尾什么时候该用它选型一句话需求是单列排序或跨列看板项数量在几百以内React SortableJS 是最省心的选择两个 props 就能跑。如果要做嵌套无限层级的树形拖拽、或每行带复杂交互的表格排序建议先评估 frontend/src/common/drag-and-drop 这类自研方案的维护成本再决定要不要自己造轮子。【免费下载链接】openprojectOpenProject is the leading open source project management software for product, project and portfolio management. A powerful Jira alternative with agile planning, issue tracking, roadmaps, Gantt charts, time tracking, collaboration features, and more. Available on premises or in the cloud. ⭐ Star us on GitHub项目地址: https://gitcode.com/GitHub_Trending/op/openproject创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考