vue3移动拖拽插件vueDraggable使用步骤

插件官网地址：

最近有个需求，需要给用户提供拖拽列表的功能，就用到了拖拽插件，百度了一波发现都是介绍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插件一致，几乎不需要改什么，直接上代码吧：

中文文档地址：vue.draggable.next 中文文档 - itxst.com

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>