vue draggable的用法多个嵌套

Vue Draggable是一个轻量级的JavaScript库，它允许你在Vue.js应用中轻松地创建可拖动的元素。它的基本用法包括安装库、添加到Vue组件上，并配置draggable属性。在处理多个嵌套的拖放场景时，可以采用递归或者事件总线等方法。

1. **安装及引入库**:
首先，在项目中安装`vue-draggable`，如果使用npm或yarn，分别运行`npm install vue-draggable`或`yarn add vue-draggable`。

2. **在组件中使用**:
将`vuedraggable`作为组件的prop传递给需要拖拽的元素，例如：

<draggable :list="nestedItems" :options="{ group: 'nestingGroup', delayOnDrop: true }">
  <div v-for="(item, index) in nestedItems" :key="index" :draggable-item="item">
    {{ item.name }}
  </div>
</draggable>

这里的`nestedItems`是包含所有可拖拽子项的数组，`group`属性用于将同一组内的元素关联起来，`delayOnDrop`设置拖放延迟。

3. **嵌套结构**:
如果有嵌套列表，可以在`nestedItems`中使用数组结构，每个内部元素也可以包含另一个`vuedraggable`实例，只需将它们加入相同的`group`即可。

4. **事件监听**:
使用`@change`或`@drop`等提供的事件处理函数来响应拖放操作，比如改变顺序、保存状态等。

5. **事件总线**:
对于更复杂的交互，你可以考虑使用Vue的事件总线来管理不同层级之间的数据同步。