大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。
今天给大家带来的主题是“10+ 前端顶级拖拽 JavaScript 库”，话不多说，直接进入正题!
React-Beautiful-DnD
React Beautiful DND 是一个漂亮且易于访问的拖放库，用于基于 React 构建的列表。 它提供了一组出色的拖放功能以及项目的自然移动，为用户提供自然而美观的拖放体验。
React Beautiful DND 支持更高级别的抽象，并且是为列表（垂直、水平、列表之间的移动、嵌套列表等）而构建。 此外，React Beautiful DnD 还支持多拖动功能，可以拖动多个项目，还可以在拖放过程中添加和删除项目。
React Beautiful DND 的典型特征包括：
- 虚拟列表支持
- 鼠标、键盘和触摸支持。
- 屏幕阅读器
- 有条件的拖/放、支持水平垂直滚动
- 兼容服务器端渲染 (SSR)
- 自定义拖动手柄
- 高性能
- 灵活的物品尺寸等等
目前 React-Beautiful-DnD 在 Github 通过 MIT 协议开源，有超过 31.3k 的 star、2.5k 的 fork、项目依赖量 100k 左右、代码贡献者 130+，妥妥的前端优质开源项目。
Sortable
Sortable 是一个开源 JavaScript 库，用于现代浏览器和触摸设备的可重新排序拖放列表， 不需要 jQuery 或框架。 此外，它支持多重拖动，允许用户选择列表中的多个项目，并将它们作为一个项目拖动到多个列表或同一列表中。
Sortable 支持许多高级功能，比如：交换阈值，用户可以在拖动并放置在不同位置时交换列表中的项目从而导致其他元素自行拖动。
此外，Sortable 是使用 Native HTML 5 Drag and Drop API 构建的，支持多种框架，如 Meteor、Angular、React、Knockout、Ember、Vue 等。
Sortable 的典型特征包括：
- 支持触摸设备和现代浏览器（包括 IE9）
- 可以从一个列表拖动到另一个列表或在同一列表内
- 支持移动项目时的 CSS 动画
- 支持拖动手柄和可选择文本（比 voidberg 的 html5sortable 更好）
- 智能自动滚动、高级交换检测、流畅的动画、多拖动支持、支持 CSS 转换
- 使用原生 HTML5 拖放 API 构建，支持：Meteor、Angular、React、Knockout、Polymer、Vue、Ember 等诸多前端框架。
- 支持任何 CSS 库，例如： Bootstrap
- 简单的 API、支持插件、CDN、不需要 jQuery（但有支持）等
目前 Sortable 在 Github 通过 MIT 协议开源，有超过 27.7k 的 star、3.7k 的 fork、妥妥的前端优质开源项目。
React DND
React DND 是一个终极库，拥有一组 React 实用程序，通过保持组件解耦来构建复杂的拖放界面，架构受到 Flux 和 Redux 等著名 React 库的启发。
此外，React DND 可以轻松地与任何组件配合使用，因为它包装了组件并将 props 注入其中，就像 React Router 和 Flummox 中遵循的相同模式一样。
React DND 的典型特征包括：
- 单向数据流
- 隐藏平台怪癖
- 可扩展且可测试
- 触摸支持 Hooks API 等等
目前 React DND 在 Github 通过 MIT 协议开源，有超过 19.9k 的 star、2k 的 fork、项目依赖量 200k 左右、代码贡献者 200+，妥妥的前端优质开源项目。
Draggable
Draggable 将本机浏览器事件抽象为综合 API，以创建自定义拖放体验。 Draggable 附带了附加模块，包括：Sortable、Droppable、Swappable。 Draggable 本身在拖动时不执行任何排序行为，但会执行繁重的工作，例如：创建镜像、发出事件、管理传感器事件、使元素可拖动。
附加模块构建在 Draggable 之上，因此提供了类似的 API 接口。Draggable 的特征包括：
- 适用于本机拖动、鼠标、触摸和强制触摸事件
- 可以通过 Hooks 到 draggables 事件生命周期来扩展拖动行为
- 可以通过向可拖动添加传感器来扩展拖动检测
- 该库针对 ES6
目前 Draggable 在 Github 通过 MIT 协议开源，有超过 17.1k 的 star、1.1k 的 fork、代码贡献者 50+，是值得关注的前端开源项目。
dropzone
Dropzone 是一个 JavaScript 库，可将任何 HTML 元素转换为 dropzone。 这意味着用户可以将文件拖放到其上，Dropzone 将显示文件预览和上传进度，并通过 XHR 为用户处理上传。
Dropzone 是完全可配置的，可以根据需求设计样式，并受到很多开发者的信赖。Dropzone 的典型特征包括：
- 图像缩略图预览
- 高 DPI 屏幕支持
- 多个文件并同步上传
- 进度更新
- 支持 Amazon S3 分段上传
- 浏览器图像调整大小等等
目前 Dropzone 在 Github 开源，有超过 17.6k 的 star、3.3k 的 fork、104k 的项目依赖量，代码贡献者 70+，是值得关注的前端开源项目。
react-grid-layout
React Grid Layout 是一个可拖动且可调整大小的网格布局库，可为 React 创建响应式网格布局。 此外，开发者可以像 Web 应用程序中的任何其他组件一样使用 React Grid Layout。
此外，React Grid Layout 还具有自动打包、可拖动和可调整大小的小部件、静态小部件、流体布局以及每个响应断点的单独布局。 开发者还可以使用上面的演示，在其中可以拖动一些框，调整它们的大小，然后调整窗口大小以查看响应断点。
React Grid Layout 的典型特征包括：
- 100% React – 没有 jQuery
- 可拖动的小部件
- 可配置的包装：水平、垂直或关闭
- 拖动和调整大小的边界检查
- 布局可以序列化和恢复
- 与
兼容等等
目前 React Grid Layout 在 Github 通过 MIT 协议开源，有超过 18.6k 的 star、2.5k 的 fork、项目依赖量 15.3k 左右、代码贡献者 130+，妥妥的前端优质开源项目。
interact.js
Interact.JS 是一个开源 JavaScript 拖放库，支持所有主流浏览器的调整大小和多点触控手势。 通过提供简单、灵活的 API 来完全控制库，该 API 提供移动元素所需的所有指针事件数据。
默认情况下，Interact.Js 不会为用户移动元素，而是为元素设置样式，以便在事件侦听器发生拖动时元素会移动。 此外，可以访问官方网站，在其中提到了一些带有代码的交互式示例。
Interact.JS 的典型特征包括：
- 惯性和折断，多点触控、同步交互
- 跨浏览器和设备，支持桌面版和移动版 Chrome、Firefox 和 Opera 以及 Internet Explorer 9+
- 与 SVG 元素交互、独立且可定制
- 除了更改光标之外不修改 DOM（但可以禁用）
目前 Interact.JS 在 Github 通过 MIT 协议开源，有超过 11.8k 的 star、0.8k 的 fork、项目依赖量 7.5k 左右、代码贡献者 50+，妥妥的前端优质开源项目。
Movable
Movable 是一个高级 JavaScript 库，除了拖放界面之外，它还可以添加许多高级功能。 因此，可以通过调整大小、环绕、捏合、分组等方式移动元素。
Movable 的典型特征包括：
- 可拖动是指拖动和移动目标的能力、可调整大小指示目标的宽度和高度是否可以增加或减少。
- Scalable 表示目标的 x 和 y 是否可以缩放变换、可旋转表示目标是否可以旋转。
- Warpable 表示目标是否可以扭曲（扭曲、弯曲）。
- Pinchable 表示目标是否可以捏合、可拖动、可调整大小、可缩放、可旋转。
- Groupable 表示目标是否可以分组移动、可拖动、可调整大小、可缩放、可旋转。
- Snapable 指示是否捕捉到参考线。
- OriginDraggable* 表示是否拖动原点。
- Clippable 表示是否对目标进行裁剪。
- Roundable 表示是否显示拖拽或者双击 border-radius。
- 支持 SVG 元素（svg、路径、直线、椭圆、g、矩形等）、支持主流浏览器、支持 3D 变换
目前 Movable 在 Github 通过 MIT 协议开源，有超过 8.7 k 的 star、0.7k 的 fork、项目依赖量 2.8k 左右、代码贡献者 40+，妥妥的前端优质开源项目。
Dragula
Dragula 是一个有用且简单的拖放 JavaScript (JS) 库，它提供了最简单的 API 来轻松在应用程序中部署拖放。 此外，默认情况下，它将允许用户拖动任何容器中的元素并将其放入列表中的任何其他容器中。
Dragula 的浏览器支持包括所有主流的浏览器和 IE7+， 1 框架支持包括普通 JavaScript、Angular 和 React。
目前 Dragula 在 Github 通过 MIT 协议开源，有超过 21.7 k 的 star、2k 的 fork、项目依赖量 21.8k 左右、代码贡献者 40+，妥妥的前端优质开源项目。
DFlex
DFlex 是一个用于现代拖放应用程序的 Javascript 库， 用 Vanilla Javascript 构建，并实现了增强的转换机制来操作 DOM 元素。 DFlex 是迄今为止 Web 上唯一操作 DOM 而不是重建它的拖拽库，并且拥有自己的调度程序和协调器。
DFlex 的典型特征包括：
- 使用元素移动机制来理解浏览器和 DOM 树，专注于高性能和易于实施，无需重新造轮子
- 无限 DOM 转换，而不是在每次交互时重建 DOM 树。
- 定制和增强的调节器仅针对从原始位置转换的元素。
- 使用调度程序与数据流隔离可以防止任何阻塞事件
- 防止任何拖放机制发生布局变化，而且每次交互都会有动画变换
- DFlex 无头且不针对任何特定框架，每个修复、功能或增强都会影响所有框架实现。
- 根据注册单独定位每个 DOM 元素，事件驱动和完全定制的 API。
- 可使用自己的匹配算法而不是平面递归算法进行扩展
- 支持三种不同类型的限制、四种类型的自定义事件和自定义布局状态发射器。
目前 DFlex 在 Github 通过 MIT 协议开源，有超过 1.7k 的 star，是一个值得关注的前端开源项目。
vue.draggable.next
Vue Draggable Next 是一个基于 Vue 的拖放组件，基于 Sortable 并与 Vue 3 兼容， 它允许拖放并与 Vuejs 项目中的视图模型数组同步。 此外，它还完全支持 Sortable.js 的功能。
该库没有 jQuery 依赖项，可以重用现有组件（例如 vuetify、element 或 vue Material 等），并使用 tag 和 componentData 属性使它们可拖动。
vue.draggable.next 的典型特征包括：
- 支持触摸设备
- 支持拖动手柄和可选择的文本
- 智能自动滚动
- 支持不同列表之间的拖放
- 与 Vue.js 3.0 过渡组兼容
- 取消支持等
目前 vue.draggable.next 在 Github 通过 MIT 协议开源，有超过 3.1k 的 star，是一个值得关注的前端开源项目。
DragSelect
DragSelect 是一个易于使用、没有任何依赖项的拖放 JavaScript 库。 DragSelect 支持 module.exports、具有 Define 的 AMD 模块、具有 .es6m 版本的 es6 模块，并且可以回退到全局命名空间以获得最大程度的开箱即用支持。
此外，DragSelect 使用修饰键进行多个独立选择，并且是超级可定制的，是最轻量级的库，zip 大小仅为 12.4 KB。
DragSelect 的典型特征包括：
- 无任何依赖关系且完全开源
- 在浏览器中复制操作系统的拖动选择
- 辅助功能 (a11y)
- 可通过键盘选择、拖放
- 支持所有主流浏览器、支持 SVG
- 支持移动（触摸交互）等等
目前 DragSelect 在 Github 通过 MIT 协议开源，有超过 0.7k 的 star，是一个值得关注的前端开源项目。
参考资料
https://github.com/atlassian/react-beautiful-dnd
https://github.com/a5hik/ng-sortable
https://themeselection.com/drag-and-drop-library/#h-ng-sortable
https://github.com/SortableJS/vue.draggable.next
https://github.com/bevacqua/dragula
https://github.com/daybrush/moveable
https://github.com/ThibaultJanBeyer/DragSelect
https://github.com/dflex-js/dflex#dflex
https://github.com/react-grid-layout/react-grid-layout
https://github.com/dropzone/dropzone
https://github.com/Shopify/draggable
https://github.com/react-dnd/react-dnd
https://github.com/atlassian/react-beautiful-dnd
https://github.com/SortableJS/Sortable
https://reactjsexample.com/a-drag-and-drop-file-input-built-using-react/#google_vignette