关于vuedraggable在Vue3中的使用

vue中vuedraggable安装：

npm i -S vuedraggable@next

在vue3中使用拖拽，要以插槽的方式，而不能像vue2中那样写！！否则会报错！

代码如下：

<template>
  <draggable
    :list="state.list"
    item-key="name"
    class="w-100"
    animation="300"
  >
    <template #item="{ element }">
      <div>
         {{ element.name }}
      </div>
    </template>
  </draggable>
</template>

<script setup>
import draggable from "vuedraggable";
let id = 1;
const state = reactive({
  list: [
    { name: "张三", id: 0 },
    { name: "李四", id: 1 },
    { name: "王五", id: 2 },
  ],
});

</script>
<style scoped>
</style>

代码中必须使用<template #item="{ element }">才可实现拖拽效果，如果不以插槽方式使用，择拖拽不生效。