VueDraggablePlus - 免费开源的 Vue 拖拽组件,支持 Vue2 / Vue3,还...
发布网友
发布时间：2024-09-17 10:34
共1个回答
热心网友
时间：2024-10-26 19:06
关于 VueDraggablePlus
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 时的痛点，让开发者使用起来更简单好用。
下面演示 在 Vue3 上 用 TS 来调用的方法，常规的 JS 方法类似，只是列表的数据格式有区别。
运行上面代码，就可以通过拖拽名字来实现排序，同时右侧会实时同步展示数据排序变化，使用起来非常简单。
VueDraggablePlus 的功能非常强大，还可以用来给表格拖拽排序，这在开发管理后台中应用非常广泛，支持拖拽表格行和列。
VueDraggablePlus 还支持和 Vue 的动画组件使用，使用方法如下：
这种用法常常被用来做删除或者增加元素的动画效果，体验非常丝滑流畅。
元素嵌套的意思就是不同容器下的子项目可以被拖拽，比如从把数据从一个分类拖到另一个分类中，既能排序也能改变分类，VueDraggablePlus 也同样支持。
官网还有详细的使用文档，而且配上了详细的代码例子，使用起来非常简单。总的来说，VueDraggablePlus 是一个很好的补充，让我们可以用另一种更舒服的方式来实现拖拽的功能需求。
VueDraggablePlus 是一个免费开源的 JS / Vue 拖拽工具库，基于 SortableJS 开发，VueDraggablePlus 和 SortableJS 同样都是采用 MIT 开源协议，所以我们可以完全免费下载来使用，也可以放心用在商业项目上。
