百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

2025 年 10+ 前端顶级拖拽 JavaScript 库

zhezhongyun 2025-02-21 16:14 57 浏览

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。

今天给大家带来的主题是“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

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法，你知道几种

Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...

解锁Shell编程:变量_shell $变量

引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...

一周热门
最近发表
标签列表