当前位置：首页 > VUE

vue树形结构实现拖拽

2026-01-20 22:05:42VUE

Vue 树形结构拖拽实现方法

在 Vue 中实现树形结构的拖拽功能，通常需要结合树形组件和拖拽库。以下是几种常见的实现方式：

使用 Element UI 的 Tree 组件

Element UI 提供了 Tree 组件并支持拖拽功能：

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

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级节点',
        children: [{
          id: 2,
          label: '二级节点'
        }]
      }]
    }
  },
  methods: {
    handleDrop(draggingNode, dropNode, type) {
      // 处理拖拽后的逻辑
    }
  }
}
</script>

使用 Vue.Draggable 实现

Vue.Draggable 是一个基于 Sortable.js 的 Vue 拖拽组件：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      treeData: [/* 树形数据 */]
    }
  },
  methods: {
    onDragEnd() {
      // 拖拽结束处理
    }
  }
}
</script>

自定义实现拖拽功能

如果需要更精细的控制，可以手动实现拖拽逻辑：

<template>
  <div class="tree">
    <div 
      v-for="node in treeData"
      :key="node.id"
      draggable
      @dragstart="dragStart(node)"
      @dragover.prevent
      @drop="drop(node)"
    >
      {{ node.label }}
      <div v-if="node.children" class="children">
        <!-- 递归渲染子节点 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      draggedNode: null
    }
  },
  methods: {
    dragStart(node) {
      this.draggedNode = node
    },
    drop(targetNode) {
      // 实现节点移动逻辑
    }
  }
}
</script>