Pragmatic drag and drop

当需要在列表、面板、表格、树、网格或绘图等场景中实现高性能拖拽时，Pragmatic drag and drop 提供一套无头（headless）方案，核心包仅 4.7KB，开发者可完全自定义视觉与无障碍控制。

它能做什么

由 Atlassian 开源，作者 Alex Reardon 也是 react-beautiful-dnd 的创造者。该库利用原生 HTML5 拖拽 API，支持虚拟化，覆盖列表排序、面板拖拽、表格拖拽排序、树形节点拖拽、绘图鼠标拖动、棋盘棋子移动等场景。官网示例不提供实时预览，而是通过辅助线指示拖拽位置。

• 碰撞计算与贴边滚动：提供 attachClosestEdge 等工具方法自动计算最近边，无需手动实现
• 全局与局部监听：monitorForElements 监听全局拖放，dropTargetForElements 针对单个元素设置放置区
• 框架无关：适用于 React、Svelte、Vue、Angular 等主流框架

适合谁用

需要构建复杂拖拽交互但不想受限于特定框架或 UI 库的团队。尤其适合任务管理应用（如 Trello/Jira 风格卡片排序）、文档管理系统（文件夹/文件移动）、在线编辑器（内容布局调整）、数据可视化工具（图表元素动态调整）以及设计工具（组件库排列组合）。

• 性能敏感场景：核心包 4.7KB，支持虚拟化，拖拽操作流畅
• 无障碍要求：为非鼠标操作用户提供友好体验
• 跨平台需求：在 Firefox、Safari、Chrome 以及 iOS/Android 设备上均运行良好

怎么上手

以 React 项目中最常见的菜单排序为例，覆盖水平、垂直及互相排序。核心步骤：1) 使用 draggable 方法给元素添加 draggable="true" 属性并指定 dragHandle；2) 使用 dropTargetForElements 或 monitorForElements 设置放置区，在 onDrop 中处理排序逻辑；3) 通过 attachClosestEdge 和 extractClosestEdge 获取与放置元素最近的边（前/后/左/右）以确定插入位置。

• 核心包：@atlaskit/pragmatic-drag-and-drop/element/adapter 提供 draggable、dropTargetForElements、monitorForElements
• 可选包：按需组合，官网提供 11 个不同路径的导入示例
• 在线演示：https://atlassian.design/components/pragmatic-drag-and-drop/examples

常见问题

Q1：Pragmatic drag and drop 与 react-beautiful-dnd 有什么关系？

A1：两者作者相同（Alex Reardon），但 Pragmatic drag and drop 是更轻量、框架无关的下一代拖拽库，核心包仅 4.7KB，而 react-beautiful-dnd 专为 React 设计且体积更大。

Q2：Pragmatic drag and drop 支持移动端拖拽吗？

A2：支持。官网明确说明在 iOS 和 Android 设备上运行良好，所有主流浏览器（Firefox、Safari、Chrome）均可使用。

Q3：这个库有实时预览效果吗？

A3：官网大部分示例不提供实时预览，而是通过辅助线指示拖拽位置。这与 react-beautiful-dnd 等库的实时预览体验不同，更注重开发者对拖拽行为的精确控制。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。