Vue 多层级目录拖动排序

本示例基于Vue.Draggable中Nested示例，git地址：https://github.com/SortableJS/Vue.Draggable

需求描述

基于多表头列表的一种后台设置：

1.列字段可以拖进表头目录中(文件与文件夹的关系)

2.可修改表头目录名称

3.可删除表头目录(删除后目录内部的列重排)

效果图如下:

 

设置完成后在前台列表的展示:

代码

1.nested-main.vue

<template>
    <div class="row">
        <div class="col-8">
            <nested-draggable :tasks="list" />
        </div>
        <rawDisplayer
            class="col-3"
            :value="list"
            title="List"
        />
    </div>
</template>

<script>
import nestedDraggable from './infra/nested';
export default {
    name: 'nested-main',
    display: 'Nested',
    order: 15,
    components: {
        nestedDraggable,
    },
    data() {
        // 文件夹最后需要加一个{name:"",type:0,emptyHolder:true,tasks:[]}的空对象占位，否则无法拖进去
        return {
            list: [
                {
                    name: 'task 1 文件夹',
                    type: 0,
                    tasks: [
                        {
                            name: 'task 2 文件',
                            type: 1,