简单好用的前端拖拽排序库

开发 前端
今天来推荐 8 个简单又好用的前端拖拽排序库!希望对你有所帮助。

大家好,我是 CUGGZ。

今天来推荐 8 个简单又好用的前端拖拽排序库!

1、React Beautiful Dnd

react-beautiful-dnd 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然,性能优秀,简洁而强大的 API,易于上手,与标准浏览器的互动性非常好。

图片

Github(⭐️ 27.5k):https://github.com/atlassian/react-beautiful-dnd。

2、Sortable

Sortable 是一个 JavaScript 拖拽库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。支持 Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout 和任何 CSS 库。

图片

Github(⭐️ 25.3k):https://github.com/SortableJS/Sortable。

3、Dragula

Dragula 是一个 JavaScript 库,实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。

图片

Github(⭐️ 21.3k):https://github.com/bevacqua/dragula。

4、React DnD

React DnD是 React 和 Redux 核心作者 Dan Abramov 创造的一组React 高阶组件,可帮助我们构建复杂的拖放界面,同时保持组件解耦。它可以在应用程序的不同部分之间通过拖动传输数据,并且组件会更改其外观和应用状态以响应拖放事件。

图片

Github(⭐️ 18k):https://github.com/react-dnd/react-dnd。

5、Vue.Draggable

Vue.Draggable 是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图模型数组同步,基于并提供 Sortable.js 的所有功能。该库适用于Vue 2,如果想在 Vue 3 中使用该库,可以访问:https://github.com/SortableJS/vue.draggable.next。

图片

Github(⭐️ 17.7k):https://github.com/SortableJS/Vue.Draggable。

6、interact.js

interact.js 是一个适用于现代浏览器的 JavaScript 拖放库,支持调整大小和多点触控手势,具有惯性和捕捉功能。为了尽可能多地提供控制,它尝试提供一个简单、灵活的API,该 API 提供移动元素所需的所有拖拽API。

图片

Github(⭐️ 11k):https://github.com/taye/interact.js。

7、React Draggable

React-Draggable 库简单易用,将 CSS 中的transform应用于 React 组件,允许我们在 UI 中拖动组件。它有不同的 props 可以让你改变组件的行为,是创建直观、用户友好界面的绝佳选择。

图片

Github(⭐️ 7.7k):https://github.com/react-grid-layout/react-draggable。

8、React Sortable Tree

React Sortable Tree 是一个用于对分层数据进行拖放式可排序表示的React组件。它支持单选多选,鼠标拖拽子集到新合集,模糊搜索等。

图片

Github(⭐️ 4.5k):https://github.com/frontend-collective/react-sortable-tree。

责任编辑:姜华 来源: 前端充电宝
相关推荐

2022-11-22 16:27:33

开发前端

2022-04-01 08:42:37

开源排序库拖拽

2024-02-05 22:53:59

前端开发

2024-02-27 09:28:15

前端开发函数库

2015-10-20 15:09:55

排序算法

2023-10-04 18:23:02

插入排序算法

2021-03-09 16:30:50

Java前端框架开发

2022-03-08 13:34:45

网络隐私软件

2023-09-26 22:22:30

选择排序Python

2022-02-24 17:37:47

低代码拖拽前端

2023-11-22 10:12:43

Sortablejs拖拽库

2021-08-01 22:35:16

Vscode开发编辑器

2022-08-18 18:37:44

前端网络开发

2022-07-12 08:43:31

人脸识别算法BlazeFace

2024-04-18 15:51:57

2020-04-22 14:27:44

前端工具开发

2024-07-19 10:31:15

2023-12-21 08:02:31

React DnD拖拽库组件

2018-01-18 15:46:55

Windows内存优化

2020-12-09 07:54:17

Vue插件鼠标
点赞
收藏

51CTO技术栈公众号