您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端10大开源拖拽排序库汇总,让搭建,更简单

时间:2022-04-01 10:44:27  来源:  作者:趣谈前端

今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.

1. dragula

前端10大开源拖拽排序库汇总,让搭建,更简单

 

一款强大且兼容性极好地拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JAVAScript / Angular / React」框架.

「github:」
https://github.com/bevacqua/dragula

「demo地址:」
https://bevacqua.github.io/dragula/

2. Interact.js

前端10大开源拖拽排序库汇总,让搭建,更简单

 

「interact.js」 是一个 JavaScript 资源库提供拖,放,调整尺寸和多点触摸手势功能用于现代浏览器。它的免费和开源版本提供了强大的配置像惯性和指针、约束调整器。

「interact.js Pro」 使用更多的调节器扩展了该开源功能,更多复杂的内置交互,框架集成,和高级开发工具,用于节省我们的事件和js开销。

「github:」
https://github.com/taye/interact.js

「demo地址:」 https://interactjs.io/

3. react-dnd

前端10大开源拖拽排序库汇总,让搭建,更简单

 

「React DnD」 是一组 「React」 高阶组件,使用的时候只需要使用对应的 「API」 将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。

「github:」
https://github.com/react-dnd/react-dnd

「demo地址:」
http://react-dnd.github.io/react-dnd

4. Sortable

前端10大开源拖拽排序库汇总,让搭建,更简单

 

「Sortable」 —是一个「JavaScript」库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需「jQuery」。支持Meteor,AngularJS,React,Polymer,Vue,Ember,Knockout和任何css库,例如Bootstrap.

「github:」
https://github.com/SortableJS/Sortable

「demo地址:」
https://sortablejs.github.io/Sortable/

5. scriptaculous

「scriptaculous」是一组「JavaScript」库,用于增强网站的用户界面。它提供了一个视觉效果引擎,一个拖放库(包括可排序列表),几个控件(基于「Ajax」的动态下拉列表,原地编辑,滑块)等等。

「github:」
https://github.com/madrobby/scriptaculous

6. react-beautiful-dnd

前端10大开源拖拽排序库汇总,让搭建,更简单

 

漂亮,可移植性 列表拖拽库. 有很多库允许React中的拖放交互. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能. 「react-beautiful-dnd」 是为垂直和水平列表专门构建得更高级别的抽象. 在该功能的子集内「react-beautiful-dnd」提供强大,自然和美丽的拖放体验.

「github:」
https://github.com/atlassian/react-beautiful-dnd

「demo地址:」
https://react-beautiful-dnd.netlify.App/

7. react-grid-dnd

前端10大开源拖拽排序库汇总,让搭建,更简单

 

网格式的拖拽排序库, 支持优雅的动画拖拽效果.

「github:」
https://github.com/bmcmahen/react-grid-dnd

「demo地址:」
https://codesandbox.io/embed/gracious-wozniak-kj9w8

8. dnd kit

前端10大开源拖拽排序库汇总,让搭建,更简单

 

「dndkit」 可以让我们轻松构建拖放界面, 而无需在每次项目需要移动位置时都更新「dom」.

「github:」
https://github.com/clauderic/dnd-kit

「demo地址:」 https://dndkit.com/

可视化搭建解决方案

1. H5-dooring

前端10大开源拖拽排序库汇总,让搭建,更简单

 

H5-Dooring 是一款功能强大,高可扩展的 H5 可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。

「github:」
https://github.com/MrXujiang/h5-Dooring

「官网地址:」 http://h5.dooring.cn

2. Formily

前端10大开源拖拽排序库汇总,让搭建,更简单

 

在 React 中,在受控模式下,表单的整树渲染问题非常明显。特别是对于数据联动的场景,很容易导致页面卡顿,为了解决这个问题,「Formily」将每个表单字段的状态做了分布式管理,从而大大提升了表单操作性能。同时,「Formily」深度整合了 「JSON Schema」 协议,可以帮助您快速解决后端驱动表单渲染的问题。

「github:」
https://github.com/alibaba/formily

「官网地址:」 https://formilyjs.org/

3. V6.Dooring

前端10大开源拖拽排序库汇总,让搭建,更简单

 

一款开箱即用的可视化大屏解决方案. 支持接入任何后端语言, 支持扩展 + 二次开发.

「官网地址:」
http://h5.dooring.cn/docz/source-list/V6.Dooring/v6



Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula 一款强大且兼容性极好地拖拽排序库, 兼容「IE7+」,...【详细内容】
2022-04-01  Tags: 前端  点击:(0)  评论:(0)  加入收藏
以Vite为代表的前端构建工具进入加速赛道ESM 大势所趋,势如破竹,由于 ESM 的普及,而带来的打包工具的革命以及适用于 ESM 下一代 CDN 的发展,业务项目在生产环境开始使用原生的...【详细内容】
2022-03-28  Tags: 前端  点击:(8)  评论:(0)  加入收藏
1、DevDocsDevDocs将不同语言、框架和库的AP都I汇聚到了一个网页上,你可以直接在一个页面进行搜索。https://devdocs.io/缺点就是网站的文档都是英文的。2.ray.so这个网站能...【详细内容】
2022-03-25  Tags: 前端  点击:(18)  评论:(0)  加入收藏
在一些内部OA或者流转的文件,或者给一些客户的报价文件、合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印...【详细内容】
2022-03-22  Tags: 前端  点击:(11)  评论:(0)  加入收藏
我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为优质八股文选手花了几天搭了个后台管理页面,今天分享下我的搭建过程,全文非技术向,就当跟大家吹吹水吧。 1、我的前...【详细内容】
2022-03-18  Tags: 前端  点击:(26)  评论:(0)  加入收藏
实现方式水印的实现方式有很多,根据实现功能的人员分工可以分为前端水印和后端水印,前端水印的优点可以总结为三点,第一,可以不占用服务器资源,完全依赖客户端的计算能力,减少服务...【详细内容】
2022-03-18  Tags: 前端  点击:(11)  评论:(0)  加入收藏
css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样...【详细内容】
2022-03-18  Tags: 前端  点击:(12)  评论:(0)  加入收藏
近几年以来,javascript 和 jquery:交互式前端 Web 开发已经成为非常有名的前端开发项目。 作为一名前端开发人员,如果你正在使用 JavaScript,你能说出哪个 JavaScript 框架对用...【详细内容】
2022-03-10  Tags: 前端  点击:(28)  评论:(0)  加入收藏
简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路:每次触发事件时都取消之前...【详细内容】
2022-03-03  Tags: 前端  点击:(25)  评论:(0)  加入收藏
一篇讲透“大”前端说到前端大家就会想到浏览器,对!前端的主要工作就是通过浏览器显示你要展现的内容。之前的浏览器性能和产品多样、性能差别大、语法还不通一(那个调试过程真...【详细内容】
2022-03-03  Tags: 前端  点击:(24)  评论:(0)  加入收藏
▌简易百科推荐
今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula 一款强大且兼容性极好地拖拽排序库, 兼容「IE7+」,...【详细内容】
2022-04-01  趣谈前端    Tags:前端   点击:(0)  评论:(0)  加入收藏
Ginpackage mainimport ( "github.com/gin-gonic/gin" "log" "net/http")func main() { log.SetFlags(log.LstdFlags | log.Lshortfile) app := gin.Default()...【详细内容】
2022-03-30  GolangVue    Tags:Vue3   点击:(2)  评论:(0)  加入收藏
以Vite为代表的前端构建工具进入加速赛道ESM 大势所趋,势如破竹,由于 ESM 的普及,而带来的打包工具的革命以及适用于 ESM 下一代 CDN 的发展,业务项目在生产环境开始使用原生的...【详细内容】
2022-03-28  运维老男孩  掘金  Tags:前端技术   点击:(8)  评论:(0)  加入收藏
接下来我们来一起了解。 初步了解 Hooks 在 vue 与 react 的现状 听一听本文作者关于 Hooks 的定义和总结 弄懂“为什么我们需要 Hooks” 进行一些简单的 Hooks 实践一、ho...【详细内容】
2022-03-28  广漂程序猿Bean    Tags:Hooks   点击:(7)  评论:(0)  加入收藏
1、DevDocsDevDocs将不同语言、框架和库的AP都I汇聚到了一个网页上,你可以直接在一个页面进行搜索。https://devdocs.io/缺点就是网站的文档都是英文的。2.ray.so这个网站能...【详细内容】
2022-03-25  前端苏蘇    Tags:前端开发   点击:(18)  评论:(0)  加入收藏
在一些内部OA或者流转的文件,或者给一些客户的报价文件、合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印...【详细内容】
2022-03-22  海椰人    Tags:ABP框架   点击:(11)  评论:(0)  加入收藏
引言应用主流的前端开发工具Vue和后端开发工具微软Visual Studio 2019,进行前后端联合调试,不适为中小型应用的一种常用简便调试方法,现介绍如下。Vue 读音/vjuː/,类似view,是...【详细内容】
2022-03-21  jn人在旅程    Tags:开发工具   点击:(19)  评论:(0)  加入收藏
我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为优质八股文选手花了几天搭了个后台管理页面,今天分享下我的搭建过程,全文非技术向,就当跟大家吹吹水吧。 1、我的前...【详细内容】
2022-03-18  程序那点事    Tags:低代码   点击:(26)  评论:(0)  加入收藏
实现方式水印的实现方式有很多,根据实现功能的人员分工可以分为前端水印和后端水印,前端水印的优点可以总结为三点,第一,可以不占用服务器资源,完全依赖客户端的计算能力,减少服务...【详细内容】
2022-03-18  Mason程    Tags:前端   点击:(11)  评论:(0)  加入收藏
css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样...【详细内容】
2022-03-18  前端苏蘇    Tags:CSS伪类   点击:(12)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条