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属性
- 拖拽时需要处理节点间的父子关系变更
- 移动节点后需要更新整个树的数据结构
- 复杂场景需要考虑拖拽限制条件（如不能拖到自身子节点下）
以上方法可根据项目需求选择，第三方库提供开箱即用的解决方案，自定义实现则更灵活但开发成本较高。
