如何与elementui的tab结合，使得tabpane可以拖动排序

[Xiaobaishushu25]

主要依赖为：

    "element-plus": "^2.4.1",
    "vue": "^3.3.4",
    "vue-draggable-plus": "^0.4.0",

这是vue代码：

  <VueDraggable ref="el" v-model="list" target=".el-tabs_nav">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
          v-for="(group, index) in list"
          :key="index"
          class="cursor-move"
          :label="`${group.name}`"
          :name="`${group.name}`"
      >
        {{group.name}}
      </el-tab-pane>
    </el-tabs>
  </VueDraggable>

import { VueDraggable } from 'vue-draggable-plus'
const activeName = ref('first')

const handleClick = (tab, event: Event) => {
  console.log(tab, event)
}
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

希望实现的效果：多个tab可以拖动排序。 目前遇到的问题：当设置target=".el-tabs_nav"直接不渲染tabpane并报错：

我去掉target属性可以正常渲染：

也尝试过设置target分别为.el-tabs或者.el-tabs_item等都不行...所以该如何正确设置呢？

我是前端新手，已搜索很长时间仍未解决，希望能获得帮助。非常感谢！

[Alfred-Skyblue]

期望可以提供在线复现案例

[Xiaobaishushu25]

期望可以提供在线复现案例

我尝试提供一个在线案例，https://stackblitz.com/edit/vitejs-vite-uvzs1x?file=src%2FApp.vue ，可以正常演示吗？

[Alfred-Skyblue]

我尝试提供一个在线案例，https://stackblitz.com/edit/vitejs-vite-uvzs1x?file=src%2FApp.vue ，可以正常演示吗？

这个案例运行没有问题啊

[Xiaobaishushu25]

我尝试提供一个在线案例，https://stackblitz.com/edit/vitejs-vite-uvzs1x?file=src%2FApp.vue ，可以正常演示吗？

这个案例运行没有问题啊

有问题的代码我注掉了，就是尝试使用VueDraggable包裹tabs使多个标签页可以拖动排序的部分，取消注释后这部分会报错： 我尝试了设置target分别为.el-tabs或者.el-tabs_item等都不行...

[Alfred-Skyblue]

target = '.el-tabs__nav' 但是element-plus在内部添加了一些元素，导致数量和list不匹配，自行斟酌

[Xiaobaishushu25]

target = '.el-tabs__nav' 但是element-plus在内部添加了一些元素，导致数量和list不匹配，自行斟酌

好的，可以了，感谢解答