React 拖拽排序别再用原生 DOM 了React SortableJS 10 分钟上手指南【免费下载链接】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/openprojectReact SortableJS是SortableJS之上的React绑定层负责把DOM拖拽事件和你的组件状态对齐。做拖拽列表或看板时你不用手写鼠标、触摸、滚动的逻辑装包、包一层组件就能用。它替你省掉了什么手写拖拽用addEventListener很麻烦拖一项状态跟不上还闪卸载组件监听还在、会泄漏触摸、滚动也得自己搞。React SortableJS把这三个坑收走了——传数组和setter就行剩下的它代劳。你不用去读它的内部实现装完就能把精力放回业务逻辑上列表顺序、后端同步这些才是你真正要操心的事。⚡ react-sortablejs 教程从装包到第一个能拖的列表最快的验证方式就是先让三行字动起来。一行装包npm install react-sortablejs sortablejs再写一个最小组件import { useState } from react; import { ReactSortable } from react-sortablejs; export function TaskList() { const [tasks, setTasks] useState([ { id: a, title: 写需求 }, { id: b, title: 评审方案 }, { id: c, title: 开始开发 }]); return ( ReactSortable list{tasks} setList{setTasks} animation{150} {tasks.map((t) div key{t.id}{t.title}/div)} /ReactSortable ); }改 list / setList / animation 三个 prop 就能接你自己的业务list 是你的数组setList 是你数组对应的 setteranimation 是落位过渡的毫秒数。拖完 React 会调用 setList 把新顺序写回状态列表就跟着变了你不用碰任何 DOM。 React 拖拽列表的高频配置速查能跑起来之后你会被一堆 prop 淹没我平时只记这几个够覆盖 90% 的场景prop干什么推荐值一句话备注list / setList数据源与写回你的数组 setState拖拽生效的一对必填animation落位过渡时长150太快生硬、太慢发飘ghostClass拖拽时空位样式sortable-ghost控制那个洞长什么样handle限定可拖区域的选择器.drag-handle只让把手能拖防误触group跨列联动开关{ name: tasks }列名一致才能互相放delay / delayOnTouchStart按住多久才起拖100 / true移动端必加否则挡滚动forceFallback用 CSS 变换模拟拖拽大列表开 true避免真实 DOM 拖动卡顿onEnd拖拽结束回调(e) 保存在这里把新顺序同步后端 看板拖拽多列联动怎么写从单列表进真实产品一般就两种需求多列之间搬项目或者单列里带约束地重排。先看看板两列都挂同一个 group 名ReactSortable list{todo} setList{setTodo} group{{ name: kanban, pull: true, put: true }} animation{150} {todo.map((t) div key{t.id}{t.title}/div)} /ReactSortable ReactSortable list{doing} setList{setDoing} group{{ name: kanban, pull: true, put: true }} animation{150} {doing.map((t) div key{t.id}{t.title}/div)} /ReactSortable这里 group 的 name 必须两列一致SortableJS 靠它判断两个容器属不属于同一组名字不同就认不出来自然放不进去pull / put 都设 true 是允许既能拉出、又能放进来只开一个方向就会变成单向通道。列与列之间不直接通信它们都只监听同一个 group 名这是看板拖拽实现的要害。顺便说移动端还要补 delay{100} delayOnTouchStart不然手指一触就起拖跟上下滚列打架体验会很糟。第二个场景是单列表带把手重排我一般直接这样配既防误触又能锁住个别行ReactSortable list{rows} setList{setRows} handle.row-drag filter.row-actions preventOnFilter onMove{(e) !rows[e.relatedIndex]?.locked} animation{150} {rows.map((r) ( div key{r.id} classNamerow span classNamerow-drag /{r.title} /div ))} /ReactSortablehandle 把可拖区域锁死在左侧把手上点行内正文或按钮就不会误触发拖拽filter 加 preventOnFilter 把操作列排除掉同时避免点击事件被吞。onMove 里判断目标行是否 locked返回 false 就拦下这次放置于是有的行不让动这种约束一行就写完了不用自己监听拖拽过程。 react 列表拖拽四个我踩过的坑坑一症状是拖完某行文字内容错位了像串到了别的行。根因是 key 用了 indexReact 调和时复用了旧节点。修复key{item.id}。坑二症状是手机上列表要么滑不动、要么一碰就拖。根因是触摸设备没设延迟拖拽和滚动在抢同一个手势。修复补上 delay{100} delayOnTouchStart。坑三症状是看板两列之间拖过去又弹回来或者根本放不进去。根因是两列 group 的 name 不一致或 put 是 false。修复统一成 group{{ name: kanban, pull: true, put: true }}。坑四症状是两百行的列表一拖就掉帧整页都在重渲染。根因是每次拖拽都更新数组子项组件跟着全部重算。修复把行组件用 React.memo 包一层并保证 id 稳定。接下来看什么到这里你页面上已经有一个能拖、能同步状态的 React 拖拽排序列表了。想看看真实产品里拖拽是怎么落地、以及这个仓库前端的目录约定可以直接翻下面两处比啃教程更快。通用拖拽控制器实现generic-drag-and-drop.controller.ts前端开发约定frontend/doc/README.md【免费下载链接】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），仅供参考