当前位置：首页 > VUE

vue实现tree拖拽

2026-01-19 04:03:53VUE

Vue 实现 Tree 拖拽功能

使用 vue-draggable 库

vue-draggable 是基于 Sortable.js 的 Vue 拖拽组件库，适合实现树形结构的拖拽功能。

安装依赖：

npm install vuedraggable

基础实现代码：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: ['nodes'],
  data() {
    return {
      treeData: this.nodes
    }
  },
  methods: {
    onDragEnd(evt) {
      console.log('拖拽完成', evt)
    }
  }
}
</script>

使用 Element UI 的 Tree 组件

Element UI 提供了现成的可拖拽树形组件。

安装 Element UI：

npm install element-ui

示例代码：

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

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

自定义实现拖拽功能

对于需要高度自定义的场景，可以直接使用 HTML5 的拖拽 API。

基础实现思路：

vue实现tree拖拽

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

<script>
export default {
  props: ['nodes'],
  data() {
    return {
      draggedNode: null
    }
  },
  methods: {
    dragStart(node) {
      this.draggedNode = node
    },
    drop(targetNode) {
      this.$emit('node-dropped', {
        dragged: this.draggedNode,
        target: targetNode
      })
    }
  }
}
</script>