vue实现树形结构拖拽
vue实现树形结构拖拽
在Vue中实现树形结构的拖拽功能，可以结合第三方库如vue-draggable或element-ui的树形组件。以下是两种常见实现方式：
使用vue-draggable实现
安装依赖：
npm install vuedraggable基础代码示例：
<template>
<div>
<draggable
v-model="treeData"
group="nodes"
@end="onDragEnd">
<div v-for="(item, index) in treeData" :key="item.id">
{{ item.name }}
<draggable
v-if="item.children"
v-model="item.children"
group="nodes">
<div v-for="child in item.children" :key="child.id">
{{ child.name }}
</div>
</draggable>
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
treeData: [
{ id: 1, name: '节点1', children: [
{ id: 11, name: '子节点1' }
]}
]
}
},
methods: {
onDragEnd() {
console.log('拖拽完成', this.treeData)
}
}
}
</script>使用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: 2,
label: '二级节点'
}]
}]
}
},
methods: {
handleDrop(draggingNode, dropNode, type) {
console.log('拖拽节点:', draggingNode.data)
console.log('放置节点:', dropNode.data)
console.log('放置类型:', type) // prev/next/inner
}
}
}
</script>自定义实现拖拽逻辑
如果需要完全自定义实现，可以使用HTML5的拖拽API：
<template>
<div class="tree">
<div
v-for="node in treeData"
:key="node.id"
draggable
@dragstart="dragStart(node)"
@dragover.prevent
@drop="drop(node)">
{{ node.name }}
<div v-if="node.children" class="children">
<!-- 递归渲染子节点 -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
draggingNode: null,
treeData: []
}
},
methods: {
dragStart(node) {
this.draggingNode = node
},
drop(targetNode) {
// 实现节点移动逻辑
}
}
}
</script>注意事项
- 树形数据结构需要包含唯一标识符（如id）
- 拖拽时需要处理父子节点的层级关系
- 复杂场景建议使用现成组件库减少开发成本
- 移动端可能需要额外处理触摸事件
以上方案可根据具体需求选择，element-ui的方案适合需要完整UI组件的情况，而vue-draggable更适合轻量级定制需求。
