需求：數(shù)據(jù)結(jié)構(gòu)為兩層，一級(jí)分類跟二級(jí)分類，一級(jí)分類之間可以互相拖拽排序，二級(jí)分類只能內(nèi)部互相拖拽排序

使用group屬性搭配transition-group做頁(yè)面上的分離，內(nèi)部多嵌套一層vuedraggable，
注意點(diǎn)，要給第二層vuedraggable和transition-group內(nèi)的父級(jí)，添加唯一的key，否則控制臺(tái)報(bào)錯(cuò)，相關(guān)層級(jí)的內(nèi)容也不會(huì)顯示出來(lái)

圖片.png

最終效果圖：

圖片.png

實(shí)際代碼內(nèi)容：

<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) {
      // 一級(jí)
      // console.log(evt, this.checkList)
      this.checkList.map((item, index) => {
        Object.assign(item, { sort: index + 1 })
        return item
      })
    },
datadragEndSub(i, evt) {
      // 二級(jí)
      // 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