使用vuedraggable做二级嵌套的排序拖拽

需求：数据结构为两层，一级分类跟二级分类，一级分类之间可以互相拖拽排序，二级分类只能内部互相拖拽排序

使用group属性搭配transition-group做页面上的分离，内部多嵌套一层vuedraggable，
注意点，要给第二层vuedraggable和transition-group内的父级，添加唯一的key，否则控制台报错，相关层级的内容也不会显示出来

图片.png

最终效果图：

图片.png

实际代码内容：

<vuedraggable class="draggableBox" :list="checkList" @update="datadragEnd"
             :group="{name: 'father', pull: true}">
             <template v-for="(item, i) in checkList">
               <transition-group>
                 <div :key="'level1'+ i" class="c-flex-row c-justify-sb c-ph10 c-pv10 tabBox">
                   <div class="c-flex-row">
                     <div class="margin-r10">{{ i + 1 }}、</div>
                     <div>{{qualificationTypeMap[item.qualificationType]}}</div>
                   </div>
                   <div class="pointer">
                     <i class="el-icon-rank c-fs-14"></i>
                   </div>
                 </div>

                 <template v-if="item.entityLists && item.entityLists.length != 0">
                   <vuedraggable class="wrapper" :list="item.entityLists" @update="datadragEndSub(i, $event)" :key="'level2'+ i"
                     :group="{name: 'child', pull: false}">
                     <transition-group>
                       <div v-for="(i, k) in item.entityLists" :key="'sublevel'+ k"
                         class="c-flex-row c-justify-sb  c-pv10 padding-l50 padding-r10 tabBox">
                         <div class="c-flex-row">
                           <div>{{i.entityName}}</div>
                         </div>
                         <div class="pointer">
                           <i class="el-icon-rank c-fs-14"></i>
                         </div>
                       </div>
                     </transition-group>
                   </vuedraggable>
                 </template>
               </transition-group>
             </template>
</vuedraggable>


排序方法：
 datadragEnd(evt) {
      // 一级
      // console.log(evt, this.checkList)
      this.checkList.map((item, index) => {
        Object.assign(item, { sort: index + 1 })
        return item
      })
    },
datadragEndSub(i, evt) {
      // 二级
      // console.log(i, evt, this.checkList[i].entityLists)
      this.checkList[i].entityLists.map((item, index) => {
        Object.assign(item, { sort: index + 1 })
        return item
      })
    },

官方文档地址：https://www.itxst.com/vue-draggable/re7vfyfe.html