vue3+vuedraggable不同组件拖拽

Vue3和Vue2一样都可以使用vuedraggable插件进行不同组件的拖拽。以下是使用vuedraggable插件实现不同组件拖拽的步骤：

1. 安装vuedraggable插件

在终端中执行以下命令：

npm install vuedraggable

2. 引入vuedraggable插件

在需要使用vuedraggable插件的组件中引入：

import draggable from 'vuedraggable'

3. 使用draggable组件

在模板中使用draggable组件，并设置相应的属性：

<draggable v-model="list" :element="'ul'" :options="{group:'items'}">
  <li v-for="(item, index) in list" :key="item.id">{{ item.name }}</li>
</draggable>

其中，v-model绑定了一个数组list，用于记录拖拽后的顺序；:element指定了拖拽的元素类型，这里为ul；:options指定了拖拽的选项，这里设置了group为items，表示不同的组件可以互相拖拽。

注意：v-model绑定的数组中的元素必须要有一个唯一的标识符，用于区分不同的元素。

4. 处理拖拽事件

当拖拽完成后，可以通过监听dragend事件来处理拖拽后的逻辑：

<draggable v-model="list" :element="'ul'" :options="{group:'items'}" @dragend="onDragEnd">
  <li v-for="(item, index) in list" :key="item.id">{{ item.name }}</li>
</draggable>

methods: {
  onDragEnd(event) {
    console.log(event)
    // 处理拖拽完成后的逻辑
  }
}

在onDragEnd方法中，可以获取到拖拽完成后的事件对象，通过事件对象可以获取到拖拽前后的元素顺序，从而进行相应的操作。

以上就是使用vuedraggable插件实现不同组件拖拽的步骤。