2020-06-20 vuedraggable 嵌套拖拽

废话不说了，直接贴代码...

<template>
  <vuedraggable class="wrapper" v-model="list" @update="datadragEnd">
    <transition-group>
      <div v-for="(item,index) in list" :key="index" class="item">
        <vuedraggable class="wrapper" @update="datadragEndSub(index,$event)">
          <transition-group>
            <p v-for="(item2,index2) in item" :key="index2">{{item2}}</p>
          </transition-group>
        </vuedraggable>
      </div>
    </transition-group>
  </vuedraggable>
</template>

<script>
  import vuedraggable from 'vuedraggable';

  export default {
    name: 'HelloWorld',
    components: {vuedraggable},
    data() {
      return {
        list: [[1,2,3,4],[7,8,5,6],[9,10,5,6],[11,12,3,5],[13,14,4,6],[15,16,3,6]]
      }
    },
    methods: {
      datadragEnd (evt) {
        console.log('父拖动前的索引 :' + evt.oldIndex)
        console.log('父拖动后的索引 :' + evt.newIndex)
      },
      datadragEndSub (index,evt) {
        console.log(index)
        console.log('子拖动前的索引 :' + evt.oldIndex)
        console.log('子拖动后的索引 :' + evt.newIndex)
      }
    }
  }
</script>
<style scoped lang="less">
  .wrapper {
    display: flex;
    justify-content: center;
    width: 100%;

    .item {
      margin:20px;
      width: 300px;
      background-color: #42b983;
      color: #ffffff;
      p{
        margin:5px;
        padding:10px;
        height: 20px;
        background: lightcoral;
      }
    }
  }
</style>

公司网络差，贴不了图片 。可以直接复制代码运行。记得安装npm install vuedraggable