插件官网地址:
最近有个需求,需要给用户提供拖拽列表的功能,就用到了拖拽插件,百度了一波发现都是介绍vuedraggable插件的,但是这个插件在vue3中使用会莫名其妙的报错,即使按照官网的v3用法也无法解决,
使用示例:
<draggable
class="wrapper"
v-model="list"
@start="drag = true"
@end="drag = false"
item-key="index"
>
<template #item="{ element }">
<div class="item">
<p>{
{ element }}</p>
</div>
</template>
</draggable>
后面又找到一个适合v3使用的vue-draggable-next插件,用法跟v2版本的vuedraggable插件一致,几乎不需要改什么,直接上代码吧:
npm i vue-draggable-next -S
<template>
<div class="flex m-10">
<draggable class="dragArea list-group w-full" :list="list" @change="log">
<div
class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
v-for="element in list"
:key="element.name"
>
{
{ element.name }}
</div>
</draggable>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'
export default defineComponent({
components: {
draggable: VueDraggableNext,
},
data() {
return {
enabled: true,
list: [
{ name: 'John', id: 1 },
{ name: 'Joao', id: 2 },
{ name: 'Jean', id: 3 },
{ name: 'Gerard', id: 4 },
],
dragging: false,
}
},
methods: {
log(event) {
console.log(event)
},
},
})
</script>