Vue实现tree 节点的上下拖动

要实现tree节点的上下拖动，可以使用Vue的拖拽指令`v-draggable`，以及一些事件处理函数。

首先，在tree节点的template中添加拖拽指令，并绑定事件：

<template>
  <div class="tree-node" v-draggable @dragstart="handleDragStart" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
    <!-- 节点内容 -->
  </div>
</template>

然后，在methods中实现拖拽事件处理函数：

methods: {
  handleDragStart(event) {
    // 记录被拖拽的节点
    this.$store.commit('setDraggedNode', this.node);
    // 设置拖拽效果为移动
    event.dataTransfer.effectAllowed = 'move';
  },
  handleDragOver(event) {
    // 阻止默认行为
    event.preventDefault();
    // 设置拖拽效果为移动
    event.dataTransfer.dropEffect = 'move';
    // 添加拖拽进入的样式
    event.target.classList.add('drag-over');
  },
  handleDragLeave(event) {
    // 移除拖拽进入的样式
    event.target.classList.remove('drag-over');
  },
  handleDrop(event) {
    // 阻止默认行为
    event.preventDefault();
    // 获取被拖拽的节点和目标节点
    const draggedNode = this.$store.state.draggedNode;
    const targetNode = this.node;
    // 移除拖拽进入的样式
    event.target.classList.remove('drag-over');
    // 如果拖拽的节点和目标节点不相同，则进行移动操作
    if (draggedNode !== targetNode) {
      // 在树中移动节点
      this.$store.commit('moveNode', { draggedNode, targetNode });
    }
  }
}

其中，`setDraggedNode`和`moveNode`是Vuex中的mutation函数，用于设置被拖拽的节点和移动节点。在`moveNode`函数中，需要对树结构进行修改，具体实现可以参考树的操作算法。