draggable 实现Nested

以下是使用Vue.Draggable实现Nested的方法：

1.安装Vue.Draggable

npm install vuedraggable

2.引入Vue.Draggable

import draggable from 'vuedraggable'

3.在模板中使用Vue.Draggable

<draggable v-model="dataList" class="main" :options="{group:'people', handle:'.dragItem'}">
  <div class="dragItem" v-for="element in dataList" :key="element.id">
    {{element.value}}
    <draggable v-if="element.children" v-model="element.children" :options="{group:'people', handle:'.dragItem'}">
      <div class="dragItem" v-for="child in element.children" :key="child.id">
        {{child.value}}
      </div>
    </draggable>
  </div>
</draggable>

4.在data中定义数据

data() {
  return {
    dataList: [
      {
        id: 1,
        value: '1',
        children: [
          {
            id: 11,
            value: '1-1'
          },
          {
            id: 12,
            value: '1-2'
          }
        ]
      },
      {
        id: 2,
        value: '2'
      },
      {
        id: 3,
        value: '3',
        children: [
          {
            id: 31,
            value: '3-1'
          },
          {
            id: 32,
            value: '3-2'
          }
        ]
      }
    ]
  }
}

5.在options中设置group和handle属性，group属性用于设置分组，handle属性用于设置拖拽的句柄。