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

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

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

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

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

相关推荐

JPA实体类注解，看这篇就全会了

基本注解@Entity标注于实体类声明语句之前，指出该Java类为实体类，将映射到指定的数据库表。name(可选)：实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用

开始今天的教程之前，先解决昨天遇到的一个问题，docker安装Dify的时候有个报错，进入Dify面板的时候会出现“InternalServerError”的提示，log日志报错：S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域，传统方法通常将关键点作为基本处理单元，这些关键点在人体骨架结构上代表关节位置（如肘部、膝盖和头部）的空间坐标。现有模型对这些关键点的预测主要采用两种范式：直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器，同样使用提供的流。一旦客户端写完消息，它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中，客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置，为了满足友友们的好奇心，这里我们不要内存，不要gpu，用最简单的方式，让大家感受一下什么是模型训练。基于你的硬件配置，我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目，MessageNest-可以打造个性化消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。定制你的消息，让通知方式更灵活多样。开源地址：https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航，从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口（SpeculationRulesAPI）的出现改变了网络应用程序接口（WebAPI）领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试，交了2000RMB，官方居然没有给线下教材资料，直接给的是在线教材，教材是PDF的但是是内嵌在网页内，可惜却没有给具体的PDF地址，无法下载，看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰，父亲上门警告，反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”，喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人，应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是，下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机（安卓，iPhone）同步日历功能的朋友请点击此链接，数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中，我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程，从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...

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