Vue2和Vue3的通用拖拽排序模块 vue-draggable-plus

1,978 阅读2分钟

vue-draggable-plus

说明

在工作中或者个人项目中,我经常会使用到拖拽排序的功能,如低代码,如表格排序,等等需求,之前一直在用Sortablejs官方的 vue2 组件,在我迭代一个项目升级到 vue3 的时候,突然发现他有很多问题,导致我的项目停滞了,后来发现 Sortablejs 一直未对 vue3 进行更新,最后一次 commit 停留在了 2021-08-25,于是两横一竖就是干,开始自己的 coding 之路,牛逼就吹到这里,下面开始介绍。

介绍

Sortablejs 进行了 Vue 的封装,支持函数、指令、组件式使用,多种用法供您选择。我们支持您的各种场景,只要您有办法获取到正确的DOM元素,我们都可以帮您完成拖拽排序。

2023-03-28 20.21.23.gif

兼容性

我们同时支持 Vue>=v3 或 Vue >=2.7,无论您使用Vue2和Vue3,都可以使用vue-draggable-plus,在使用方式上并无区别。

解决痛点

Sortablejs 官方以往的 Vue 组件中,都是通过使用组件作为列表的直接子元素来实现拖拽列表,当我们使用一些组件库时,如果组件库中没有提供列表根元素的插槽,我们很难实现拖拽列表,vue-draggable-plus 完美解决了这个问题,它可以让你在任何元素上使用拖拽列表,我们可以使用指定元素的选择器,来获取到列表根元素,然后将列表根元素作为 Sortablejscontainer,详情参考指定目标容器

结尾

如果您在工作中有这样的需求,赶紧动起来吧,如果它可以为你提供帮助,希望各位客观动动小手,帮忙点个star