开发网站需要什么语言,网站开发技术的现状及发展趋势,如何做一份网站的数据分析,企业 网站 推广今天在网上看到尤雨溪推荐的这款拖拽组件#xff0c;试了一下非常不错#xff0c;同样推荐给大家。 VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块#xff0c;基于 Sortablejs 封装#xff0c;支持 Vue3 或 Vue 2.7#xff0c;本月的 21 日#xff0c;Vue 作者尤… 今天在网上看到尤雨溪推荐的这款拖拽组件试了一下非常不错同样推荐给大家。 VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块基于 Sortablejs 封装支持 Vue3 或 Vue 2.7本月的 21 日Vue 作者尤雨溪还在社交媒体上推荐了这款组件。 If you are looking for a drag-and-drop library for Vue (both 2 and 3), this one looks really good。 如果你想找一个 Vue 2 和 Vue 3 都能使用的拖拽库这个看起来很不错。 —Vue.js 作者尤雨溪 根据 VueDraggablePlus 的作者表示功能强大的 Sortablejs 一直是前端领域比较知名的拖拽工具库在2020年我也推荐过官方的 Vue.Draggable不过这个库的 Vue3 版本一直没有更新和目前主流的 Vue3 已经严重脱节了于是才有了 VueDraggablePlus 项目他们基于 Sortablejs 封装了多种用法让其支持 Vue3并且支持以组件、hooks 或指令的方式调用同时也解决一些直接使用 Sortablejs 时的痛点让开发者使用起来更简单好用。 功能强大全面继承 Sortable.js 拖拽排序库的所有功能Vue 生态支持好兼容 Vue 3 和 Vue2实用灵活支持组件、指令、函数式调用我们喜欢那种编程方式都没问题TS 支持这个库本身就是用 TypeScript 编写有完整的 TS 文档数据绑定支持 v-model 双向绑定不需要单独维护排序数据支持自定义容器可以自定某个容器作为拖拽容器比 Sortable.js 更灵活。 安装库 用组件方式调用 下面演示 在 Vue3 上 用 TS 来调用的方法常规的 JS 方法类似只是列表的数据格式有区别。 运行上面代码就可以通过拖拽名字来实现排序同时右侧会实时同步展示数据排序变化使用起来非常简单。 表格排序 VueDraggablePlus 的功能非常强大还可以用来给表格拖拽排序这在开发管理后台中应用非常广泛支持拖拽表格行和列。 和 Vue 过渡动画一起使用 VueDraggablePlus 还支持和 Vue 的动画组件使用使用方法如下 这种用法常常被用来做删除或者增加元素的动画效果体验非常丝滑流畅。 拖拽嵌套 元素嵌套的意思就是不同容器下的子项目可以被拖拽比如从把数据从一个分类拖到另一个分类中既能排序也能改变分类VueDraggablePlus 也同样支持。 官网还有详细的使用文档而且配上了详细的代码例子使用起来非常简单。总的来说VueDraggablePlus 是一个很好的补充让我们可以用另一种更舒服的方式来实现拖拽的功能需求。 VueDraggablePlus 是一个免费开源的 JS / Vue 拖拽工具库基于 SortableJS 开发VueDraggablePlus 和 SortableJS 同样都是采用 MIT 开源协议所以我们可以完全免费下载来使用也可以放心用在商业项目上。 原文链接https://www.thosefree.com/vuedraggableplus