vue实现tree拖拽
Vue 实现 Tree 拖拽功能
使用 vuedraggable 库
vuedraggable 是基于 Sortable.js 的 Vue 拖拽组件，适合实现树形结构的拖拽功能。
安装依赖：
npm install vuedraggable基础实现代码：
<template>
<div>
<draggable
v-model="treeData"
group="nodes"
@end="onDragEnd">
<div v-for="(node, index) in treeData" :key="node.id">
{{ node.name }}
<draggable
v-if="node.children"
v-model="node.children"
group="nodes"
@end="onDragEnd">
<div v-for="child in node.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: 'Node 1',
children: [
{ id: 11, name: 'Child 1' },
{ id: 12, name: 'Child 2' }
]
},
{
id: 2,
name: 'Node 2',
children: [
{ id: 21, name: 'Child 1' }
]
}
]
}
},
methods: {
onDragEnd() {
console.log('拖拽完成', this.treeData)
}
}
}
</script>使用 Element UI 的 Tree 组件
如果项目中使用 Element UI，可以直接使用其 Tree 组件内置的拖拽功能。
安装 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: 'Node 1',
children: [
{ id: 11, label: 'Child 1' },
{ id: 12, label: 'Child 2' }
]
},
{
id: 2,
label: 'Node 2',
children: [
{ id: 21, label: 'Child 1' }
]
}
]
}
},
methods: {
handleDrop(draggingNode, dropNode, type) {
console.log('拖拽完成', this.treeData)
}
}
}
</script>自定义实现拖拽逻辑
如果需要更精细的控制，可以手动实现拖拽逻辑。
基础实现思路：
<template>
<div class="tree">
<div
v-for="node in treeData"
:key="node.id"
class="node"
draggable
@dragstart="dragStart(node)"
@dragover.prevent
@drop="drop(node)">
{{ node.name }}
<div
v-if="node.children"
class="children">
<div
v-for="child in node.children"
:key="child.id"
class="child"
draggable
@dragstart="dragStart(child)"
@dragover.prevent
@drop="drop(child)">
{{ child.name }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [...], // 树数据
draggedNode: null // 当前拖拽的节点
}
},
methods: {
dragStart(node) {
this.draggedNode = node
},
drop(targetNode) {
// 实现节点移动逻辑
// 需要处理父子关系变更
}
}
}
</script>
<style>
.node, .child {
padding: 8px;
margin: 4px;
border: 1px solid #ddd;
}
.children {
margin-left: 20px;
}
</style>注意事项
- 树形数据结构需要包含唯一标识符（如 id）
- 拖拽时需要处理父子关系的变更
- 跨层级拖拽时需要更新整个树结构
- 可以考虑添加动画效果提升用户体验
- 复杂场景可能需要实现限制条件（如某些节点不可拖拽）
以上方法可以根据项目需求选择使用，vuedraggable 适合通用场景，Element UI Tree 适合使用该组件库的项目，自定义实现则适合需要高度定制化的场景。
