大家好，我是「前端实验室」爱分享的了不起~
今天在网上看到尤雨溪推荐的这款拖拽组件，试了一下非常不错，这里推荐给大家。
说到拖拽工具库，非大名鼎鼎的的 Sortablejs 莫属。它是前端领域比较知名的，且功能强大的工具。但我们直接使用Sortablejs的情况很少，一般都是使用基于它的封装工具。今天推荐的 VueDraggablePlus 亦是如此。
关于 VueDraggablePlus
VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块，基于 Sortablejs 封装，支持 Vue3 或 Vue 2.7 。前不久，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 作者尤雨溪
ps:按照官方的说法，由于 Sortablejs 的 vue3 组件一直没有更新，已经跟 vue3 严重脱节，所以诞生了这个VueDraggablePlus项目。但貌似有vuedraggable@next这个库是支持VUE3的。嗯~这都不是重点！重点是，VueDraggablePlus可以让你在任何元素上使用拖拽列表！
在任何元素上使用拖拽列表
在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表。当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们很难实现拖拽列表！
VueDraggablePlus完美解决了这个问题。它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container。这样我们就不用自己再包一层啦。
功能提醒
- 功能强大：全面继承 Sortable.js 拖拽排序库的所有功能；
- Vue 生态支持好：兼容 Vue 3 和 Vue2；
- 实用灵活：支持组件、指令、函数式调用；
- TS 支持：这个库本身就是用 TypeScript 编写，有完整的 TS 文档；
- 数据绑定：支持 v-model 双向绑定，不需要单独维护排序数据；
- 支持自定义容器：可以自定某个容器作为拖拽容器，比 Sortable.js 更灵活。
安装和使用示例
安装倒是非常简单，直接加入依赖就好。
代码语言：javascript复制npm install vue-draggable-plus
在使用上，VueDraggablePlus提供三种方式：组件使用方式、hooks使用方式和指令使用方式。了不起喜欢用组件方式多一些，这里大概贴一下官方的例子，给大家分享下。
先导入组件。
代码语言：javascript复制import { VueDraggable } from 'vue-draggable-plus'
然后在模板中直接使用<VueDraggable>标签.
<template>
<div class="flex">
<VueDraggable
v-model="list1"
animation="150"
ghostClass="ghost"
group="people"
@update="onUpdate"
@add="onAdd"
@remove="remove"
>
<div
v-for="item in list1"
:key="item.id"
class="cursor-move h-30 bg-gray-500/5 rounded p-3"
>
{{ item.name }}
</div>
</VueDraggable>
<VueDraggable
v-model="list2"
animation="150"
group="people"
ghostClass="ghost"
@update="onUpdate"
@add="onAdd"
@remove="remove"
>
<div
v-for="item in list2"
:key="item.id"
class="cursor-move h-30 bg-gray-500/5 rounded p-3"
>
{{ item.name }}
</div>
</VueDraggable>
</div>
<div class="flex justify-between">
<preview-list :list="list1" />
<preview-list :list="list2" />
</div>
</template>
把数据和方法添加完善即可。
代码语言：javascript复制<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
{
name: 'Joao',
id: '1'
},
{
name: 'Jean',
id: '2'
},
{
name: 'Johanna',
id: '3'
},
{
name: 'Juan',
id: '4'
}
])
const list2 = ref(
list1.value.map(item => ({
name: `${item.name}-2`,
id: `${item.id}-2`
}))
)
function onUpdate() {
console.log('update')
}
function onAdd() {
console.log('add')
}
function remove() {
console.log('remove')
}
</script>
整体的拖拽效果如下：
这只是双列表拖拽的示例。还有其他诸如表格行、列拖拽，组件嵌套拖拽等功能！敬请大家移步官方地址进行查阅。
VueDraggablePlus 官方地址： https://alfred-skyblue.github.io/vue-draggable-plus/
