Vue.Draggable多级拖拽

1.创建一个《NestedDraggable.vue》的组件

<template>
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
    <li v-for="el in tasks" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-draggable :tasks="el.tasks" />
    </li>
  </draggable>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  props: {
    tasks: {
      required: true,
      type: Array
    }
  },
  components: {
    draggable
  },
  name: 'nested-draggable'
}
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>

2.引用组件

<NestedDraggable :tasks="list" />

import NestedDraggable from './NestedDraggable.vue'

components: { NestedDraggable }

list: [
  {
    name: 'task1',
    tasks: [
      { name: 'task 2', tasks: [] }
    ]
  },
  {
    name: 'task 3',
    tasks: [
      { name: 'task 4', tasks: [] }
    ]
  },
  {
    name: 'task 5',
    tasks: []
  }
]