对比react-beautiful-dnd,react-sortable-hoc,react-dnd,pragmatic-drag-and-drop
Author：zhoulujun Date：
Sortable.js，有知名的react-sortable-hoc，https://github.com/clauderic/react-sortable-hoc
而vue生态的话，vue-draggable而也是基于
但是，目前react-sortable-hoc库不再更新（支持到react16后），而是推出新的https://github.com/clauderic/dnd-kit
这个对于hooks与react18是一个更好的选择！
具体用法看官网：https://next.dndkit.com/extend/modifiers
由 Atlassian（Jira、Confluence 母公司）开发，专注于列表类拖拽排序，提供流畅的动画效果和优秀的用户体验的react-beautiful-dnd，是一个非常不错的选择：https://github.com/atlassian/react-beautiful-dnd
而 react-beautiful-dnd同样也不在维护 ，推出了@atlaskit/pragmatic-drag-and-drop
这个文档层面，支持的更加全面：https://atlassian.design/components/pragmatic-drag-and-drop/
| 功能点 | dnd-kit | react-sortable-hoc | react-beautiful-dnd | @hello-pangea/dnd | react-dnd | @atlaskit/pragmatic-drag-and-drop | react-sortablejs |
|---|---|---|---|---|---|---|---|
| 基础列表拖拽 | 支持（通过 @dnd-kit/sortable） | 支持 | 原生支持（核心场景） | 就是react-beautiful-dnd的社区版 | 支持（需手动实现排序） | 支持 | 支持（Sortable.js 原生能力） |
| 网格 / 矩阵拖拽 | 支持（灵活配置） | 支持 | 不支持 | 和原版差不多，所以其他不再填 | 支持（需自定义） | 支持 | 支持 |
| 树形结构拖拽 | 支持（官方 @dnd-kit/tree 扩展） | 有限支持（需自定义） | 不支持 | 支持（需第三方扩展） | 支持 | 支持 | |
| 跨列表拖拽 | 支持 | 支持 | 支持（有限制） | 支持（高度灵活） | 支持 | 支持 | |
| 拖拽保留原数据（如 A→B 不删除 A 项） | 支持（通过自定义逻辑） | 支持（需手动处理） | 需额外实现 | 支持（底层可控） | 支持（通过自定义逻辑） | 支持（配置 clone 选项） | |
| 触摸设备支持 | 支持（@dnd-kit/touch 扩展） | 不原生支持（需适配） | 不支持 | 支持（通过后端适配器） | 原生支持 | 支持 | |
| 键盘操作（无障碍） | 支持（@dnd-kit/accessibility） | 有限支持 | 原生支持（优秀） | 需手动实现 | 原生支持（符合 WAI-ARIA） | 有限支持（需额外配置） | |
| 拖拽动画 | 丰富（内置弹簧 / 平滑动画，可定制） | 基础动画 | 流畅（固定物理动画） | 无内置（需手动实现） | 基础动画（可自定义） | 基础动画 | |
| 文件拖放 | 需自定义 | 不支持 | 不支持 | 原生支持（扩展） | 需自定义 | 不支持 | |
| API 风格 | 声明式 + Hooks（如 useDraggable） | 高阶组件（HOC），不是 hooks 风格 | 声明式组件（如 DragDropContext） | 底层 API + 装饰器（如 DragSource） | 事件驱动 + 钩子（偏底层） | 配置式（基于 Sortable.js 选项） | |
| 学习曲线 | 中等（文档清晰，示例丰富） | 低（API 简单） | 低（API 简洁，文档完善） | 高（概念多，需理解 “后端”“上下文” 等） | 中等偏上（需理解拖拽生命周期） | 简单 | |
| React 版本适配 | 深度适配 React 18+（并发模式） | 兼容 React 17-，React 18 有兼容问题 | React 18 兼容问题未修复 | 支持 React 18+ | 支持 React 18+ | 中（跨框架设计，React 是适配之一） | |
| 类型支持（TS） | 优秀 | 一般（旧版定义） | 良好 | 优秀 | 优秀 | 一般 | |
| 包体积 | ~10KB（核心包） | ~15KB | ~25KB | ~30KB | ~20KB（核心包） | ||
| 维护情况 | 活跃维护（社区推荐，长期趋势） | 不再维护（最后更新 2019） | 已停止维护（Atlassian 官方停更） | 完全是 社区驱动 | 活跃维护 | 活跃维护（Atlassian 官方主推 | Sortable.js 危机 |
就我个人而已，更加喜欢dnd-kit，因为现代化设计，灵活性第一。支持移动端，交互可以完全定制。
但是，作为企业级的@atlaskit/pragmatic-drag-and-drop（Atlassian 新一代拖拽方案，替代 react-beautiful-dnd）
适合场景：企业项目，看板，复杂拖拽迁移 Atlassian 生态的项目，而且@atlaskit/pragmatic-drag-and-drop是多框架项目（React + Vue/Svelte 等）
转载本站文章《对比react-beautiful-dnd,react-sortable-hoc,react-dnd,pragmatic-drag-and-drop》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2025_0921_9639.html