Vue 多层级目录拖动排序

Vue 多层级目录拖动排序涉及到多个方面的技术，可以参考以下步骤：

1. 采用递归组件实现多层级目录的展示；
2. 使用第三方拖拽库（如 vue-draggable）实现拖拽功能；
3. 监听拖拽事件，获取拖拽元素的位置信息；
4. 计算拖拽元素与目标位置元素的位置关系，进行位置的交换；
5. 更新数据，重新渲染组件。

具体实现方式可以参考以下代码示例：

<template>
  <div>
    <ul>
      <draggable v-model="items" :options="dragOptions">
        <template v-for="(item, index) in items">
          <li :key="item.id">
            {{ item.name }}
            <ul v-if="item.children">
              <recursive-draggable :items="item.children"></recursive-draggable>
            </ul>
          </li>
        </template>
      </draggable>
    </ul>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'RecursiveDraggable',
  components: {
    draggable
  },
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      dragOptions: {
        group: 'items',
        animation: 150,
        ghostClass: 'ghost'
      }
    }
  },
  methods: {
    onDragEnd (evt) {
      // 获取拖拽元素的位置信息
      const startIndex = evt.oldIndex
      const endIndex = evt.newIndex
      const draggedItem = this.items[startIndex]

      // 计算拖拽元素与目标位置元素的位置关系，进行位置的交换
      this.items.splice(startIndex, 1)
      this.items.splice(endIndex, 0, draggedItem)

      // 更新数据，重新渲染组件
      this.$forceUpdate()
    }
  }
}
</script>

在以上代码中，我们采用了递归组件的方式实现多层级目录的展示，同时引入了第三方拖拽库 `vuedraggable`，在 `draggable` 组件中绑定了 `items` 数组，设置了拖拽配置项 `dragOptions`，并监听了 `onDragEnd` 事件，实现了拖拽结束后位置的交换和数据的更新。

需要注意的是，以上代码只是一个简单的示例，实际实现时需要根据具体需求进行适当修改和完善。