vue树形结构实现拖拽

Vue树形结构拖拽实现方法

使用vue-draggable-nested-tree库

安装依赖库：

npm install vue-draggable-nested-tree

基础实现代码：

<template>
  <draggable-nested-tree 
    :value="treeData"
    @input="handleInput"
    draggable
  />
</template>

<script>
import DraggableNestedTree from 'vue-draggable-nested-tree'

export default {
  components: { DraggableNestedTree },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '节点1',
          children: [
            { id: 2, name: '子节点1' }
          ]
        }
      ]
    }
  },
  methods: {
    handleInput(newTree) {
      this.treeData = newTree
    }
  }
}
</script>

使用Element UI的Tree组件

安装Element UI：

npm install element-ui

实现拖拽功能：

<template>
  <el-tree
    :data="treeData"
    draggable
    @node-drop="handleDrop"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级节点',
        children: [{
          label: '二级节点'
        }]
      }]
    }
  },
  methods: {
    handleDrop(draggingNode, dropNode, dropType) {
      console.log('拖拽完成', draggingNode, dropNode, dropType)
    }
  }
}
</script>

自定义拖拽实现

通过HTML5原生拖拽API实现：

<template>
  <div class="tree">
    <div 
      v-for="node in treeData"
      :key="node.id"
      draggable
      @dragstart="handleDragStart($event, node)"
      @dragover.prevent
      @drop="handleDrop($event, node)"
    >
      {{ node.name }}
      <div v-if="node.children" class="children">
        <tree-node :nodes="node.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['nodes'],
  data() {
    return {
      treeData: this.nodes,
      draggedNode: null
    }
  },
  methods: {
    handleDragStart(e, node) {
      this.draggedNode = node
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDrop(e, targetNode) {
      if (this.draggedNode !== targetNode) {
        // 实现节点移动逻辑
      }
    }
  }
}
</script>

使用Vue.Draggable实现

安装vue.draggable：

npm install vuedraggable

嵌套树实现：

<template>
  <draggable 
    v-model="treeData"
    group="nodes"
    @end="onDragEnd"
  >
    <div v-for="node in treeData" :key="node.id">
      {{ node.text }}
      <tree-node 
        v-if="node.children"
        :nodes="node.children"
      />
    </div>
  </draggable>
</template>

<script>
import Draggable from 'vuedraggable'

export default {
  components: { Draggable },
  props: ['nodes'],
  data() {
    return {
      treeData: this.nodes
    }
  },
  methods: {
    onDragEnd() {
      // 处理拖拽结束后的数据更新
    }
  }
}
</script>

关键注意事项

• 树形数据结构需要包含唯一标识符和children属性
• 拖拽时需要处理节点间的父子关系变更
• 移动节点后需要更新整个树的数据结构
• 复杂场景需要考虑拖拽限制条件（如不能拖到自身子节点下）

以上方法可根据项目需求选择，第三方库提供开箱即用的解决方案，自定义实现则更灵活但开发成本较高。