hi,大家好,我是许小希,分享了很多关于“低代码可视化”和“前端-结束工程”之前跟大家分享过,今天继续跟大家分享我们分享“8”个非常流行的开源“拖拽排序”类库和“2”个非常有价值的“可视化搭建”解决方案。1.dragula是一个功能强大、兼容性高的拖拽式排序库,兼容“IE7+”,支持“vanillaJavaScript/Angular/React”等框架。《github:》https://github.com/bevacqua/dragula《演示地址:》https://bevacqua.github.io/dragula/2。Interact.js“interact.js”是一个为现代浏览器提供拖放、调整大小和多点触控手势功能的“JavaScript”资源库。它的免费和开源版本提供了强大的配置,如惯性和指针、约束调节器。“interact.jsPro”通过更多监管者、更复杂的内置交互、框架集成和高级开发工具扩展了这一开源功能,以节省我们的事件和js开销。《github:》https://github.com/taye/interact.js《演示地址:》https://interactjs.io/3。react-dnd《ReactDnD》是一套“React”高层组件,使用时只需要使用相应的“API”对目标组件进行包装,即可实现拖动或接受被拖动元素的功能。《github:》https://github.com/react-dnd/react-dnd《演示地址:》http://react-dnd.github.io/react-dnd4。Sortable“Sortable”—是一个“JavaScript”库,用于在现代浏览器和触摸设备上重新排序拖放列表。不需要“jQuery”。支持Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout和任何CSS库,例如Bootstrap。《github:》https://github.com/SortableJS/Sortable《演示地址:》https://sortablejs.github.io/Sortable/5。scriptaculous“scriptaculous”是一组用于增强网站用户界面的“JavaScript”库。它提供了一个视觉效果引擎、一个拖放库(包括可排序列表)、几个控件(基于“Ajax”的动态下拉列表、就地编辑、滑块)等等。「github:」https://github.com/madrobby/scriptaculous6。react-beautiful-dnd漂亮的可移植列表拖放库。有许多库允许在React中进行拖放交互。其中最引人注目的是令人惊叹的“react-dnd”。它提供了一组出色的拖放功能,在特定情况下可以很好地处理html5极其不一致的拖放功能。“react-beautiful-dnd”是专门为垂直和水平列表构建的更高层次的抽象。在这个功能子集中,“react-beautiful-dnd”提供了强大、自然和美观的拖放体验。《github:》https://github.com/atlassian/react-beautiful-dnd《演示地址:》https://react-beautiful-dnd.netlify.app/7。react-grid-dnd拖拽网格一个支持优雅动画拖拽效果的排序库。《github:》https://github.com/bmcmahen/react-grid-dnd《演示地址:》https://codesandbox.io/embed/gracious-wozniak-kj9w88.dndkit《dndkit》可以让我们轻松构建每次项目需要移动位置时,拖放界面无需更新“dom”。《github:》https://github.com/clauderic/dnd-kit《演示地址:》https://dndkit.com/可视化搭建方案1.H5-dooringH5-Dooring是一款功能强大、扩展性强的H5可视化页面配置解决方案致力于提供一套简单、方便、专业、可靠、无限可能的H5落地页最佳实践。「github:」https://github.com/MrXujiang/h5-Dooring「官网地址:」http://h5.dooring.cn2。Formily在React中,在受控模式下,表单的整树渲染问题非常明显。尤其是数据联动场景,很容易造成页面卡顿。为了解决这个问题,「Formily」对各个表单域的状态进行了分布式管理,大大提高了表单操作的性能。同时,“Formily”深度集成了“JSONSchema”协议,可以帮助您快速解决后端驱动表单渲染问题。《github:》https://github.com/alibaba/formily《官网地址:》https://formilyjs.org/3。V6.Dooring是开箱即用的视觉大屏解决方案。支持接入任意后端语言,支持扩展+二次开发。《官网地址:》http://h5.dooring.cn/docz/source-list/V6.Dooring/v6《技术分享:》http://lowcode.dooring。cn/product/detail?fid=_UKqJCZEBb
