如何使用Vue-Draggable-Next实现嵌套可拖拽组件功能？

问题原因及修复方案 #

你遇到的嵌套拖拽失效、子元素绑定点击事件后无法拖拽的问题，都是vuedraggable嵌套使用时的常见配置遗漏，不需要强制使用嵌套数据结构，按下面的配置调整即可： #

1. 区分不同层级拖拽的事件范围

嵌套使用draggable标签时，必须给不同层级的组件明确指定可拖拽元素的选择器、以及独立的分组配置，避免两层拖拽事件互相冲突：

• 外层App.vue的draggable标签指定draggable=".chart-item"，仅匹配外层图表卡片类名的元素可拖拽，同时绑定外层独立的图表列表数组即可，不需要嵌套内层数据
• 内层Chart3.vue的draggable标签指定draggable=".inner-item"，仅匹配内层需要拖拽的子元素类名，同时给group设置独立分组，阻止内层元素被拖到外层（如果不需要跨层级拖拽的话）：

<!-- 内层draggable配置示例 -->
<draggable
  v-model="innerItemList"
  :group="{ name: 'inner-drag-group', pull: false, put: false }"
  draggable=".inner-item"
  item-key="id"
>
  <!-- 内部元素结构 -->
</draggable>

2. 解决点击事件和拖拽事件的冲突

可拖拽元素同时绑定点击事件时，事件触发逻辑会互相干扰，不需要调整z-index，只要给拖拽行为指定独立的触发手柄（handle）即可：

<draggable
  <!-- 其他配置省略 -->
  handle=".drag-handle"
>
  <template #item="{ element }">
    <div class="inner-item">
      <!-- 仅点击这个手柄图标时才触发拖拽 -->
      <span class="drag-handle">☰</span>
      <!-- 点击内容区域仅触发点击事件，不会触发拖拽 -->
      <div class="item-content" @click="handleItemClick(element)">
        元素内容
      </div>
    </div>
  </template>
</draggable>

3. 版本适配检查

如果是Vue3项目，必须安装vuedraggable@next版本，Vue2项目安装vuedraggable@2.x版本，版本不匹配也会导致配置不生效。 #

如果需要实现跨层级拖拽（内层元素可以拖到外层，或者外层元素拖到内层），只要把两层draggable的group.name设置为相同值，再按需调整pull和put的布尔值即可，不需要修改你现有数据结构。

内容的提问来源于stack exchange，提问作者LovelyAndy