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:"",tasks:[]}的空对象占位，否则无法拖进去
    return {
      list: [
        {
          name: "task 1 文件夹",
          type: 0,
          tasks: [
            {
              name: "task 2 文件",
              type: 1,
              tasks: []
            },
            {
              name: "",
              type: 0,
              tasks: []
            }
          ]
        },
        {
          name: "task 3 文件夹",
          type: 0,
          tasks: [
            {
              name: "task 4 文件",
              type: 1,
              tasks: []
            },
            {
              name: "",
              type: 0,
              tasks: []
            }
          ]
        },
        {
          name: "task 5 文件",
          type: 1,
          tasks: []
        },
        {
          name: "task 6 文件夹",
          type: 0,
          tasks: [
            {
              name: "task 6-1 文件夹",
              type: 0,
              tasks: [
                {
                  name: "",
                  type: 0,
                  tasks: []
                }
              ]
            },
            {
              name: "",
              type: 0,
              tasks: []
            }
          ]
        },
        {
          name: "task 7 文件夹",
          type: 0,
          tasks: [
            {
              name: "",
              type: 0,
              tasks: []
            }
          ]
        }
      ]
    };
  }
};
</script>
<style scoped></style>

2.nested-draggable.vue

<template>
  <div v-if="tasks&&tasks.length>0">
    <draggable
      class="dragArea"
      tag="div"
      v-bind="dragOptions"
      :list="tasks"
      :group="{ name: 'g1' }"
    >
      <template v-for="el in tasks">
        <div
          draggable=".item"
          class="list-group-item"
          :class="{'nested-1':el.type==0,'nested-2':el.type==1}"
          v-if="el.name"
          :key="el.name"
        >
          <p>{{ el.name }}</p>
          <nested-draggable :tasks="el.tasks"></nested-draggable>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import draggable from "@/vuedraggable";

export default {
  name: "nested-draggable",
  components: {
    draggable
  },
  computed: {
    dragOptions() {
      return {
        group: "nested",
        ghostClass: "ghost",
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
      };
    }
  },
  props: {
    tasks: {
      required: true,
      type: Array
    }
  },
  methods: {
    addItem(item) {
      item.tasks.push({
        name: item.name + "-1",
        type: 0,
        tasks: [
          {
            name: "",
            type: 0,
            tasks: []
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item {
  margin-top: 5px;
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.nested-1 {
  background-color: #e6e6e6;
}

.nested-2 {
  background-color: #cccccc;
}
.nested-3 {
  background-color: #b3b3b3;
}
</style>

　　

2.效果图