vue-draggable-plus
说明
在工作中或者个人项目中,我经常会使用到拖拽排序的功能,如低代码,如表格排序,等等需求,之前一直在用Sortablejs官方的 vue2 组件,在我迭代一个项目升级到 vue3 的时候,突然发现他有很多问题,导致我的项目停滞了,后来发现 Sortablejs 一直未对 vue3 进行更新,最后一次 commit 停留在了 2021-08-25,于是两横一竖就是干,开始自己的 coding 之路,牛逼就吹到这里,下面开始介绍。
介绍
对 Sortablejs 进行了 Vue 的封装,支持函数、指令、组件式使用,多种用法供您选择。我们支持您的各种场景,只要您有办法获取到正确的DOM元素,我们都可以帮您完成拖拽排序。
兼容性
我们同时支持 Vue>=v3 或 Vue >=2.7,无论您使用Vue2和Vue3,都可以使用vue-draggable-plus,在使用方式上并无区别。
解决痛点
在 Sortablejs 官方以往的 Vue 组件中,都是通过使用组件作为列表的直接子元素来实现拖拽列表,当我们使用一些组件库时,如果组件库中没有提供列表根元素的插槽,我们很难实现拖拽列表,vue-draggable-plus 完美解决了这个问题,它可以让你在任何元素上使用拖拽列表,我们可以使用指定元素的选择器,来获取到列表根元素,然后将列表根元素作为 Sortablejs 的 container,详情参考指定目标容器。
结尾
如果您在工作中有这样的需求,赶紧动起来吧,如果它可以为你提供帮助,希望各位客观动动小手,帮忙点个star