<template>
<div class="container">
<aside>
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
></el-tree>
</aside>
<main @drop="drop" @dragover.prevent>
<ul>
<li
v-for="(item,index) in rightList"
:key="index"
>{
{
item.label}}</li>
</ul>
</main>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2",
children: [
{
id: 11,
label: "三级 3-2-1"
},
{
id: 12,
label: "三级 3-2-2"
},
{
id: 13,
label: "三级 3-2-3"
}
]
}
]
}
],
rightList: [],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
handleDragStart(node, ev) {
ev.dataTransfer.setData("item", JSON.stringify(node.data));
},
allowDrop(draggingNode, dropNode, type) {
return false;
},
allowDrag(draggingNode) {
return true;
},
drop(event) {
let data = event.dataTransfer.getData("item");
this.rightList.push(JSON.parse(data))
// console.log('this.rightList:', this.rightList)
}
}
};
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 500px;
overflow: auto;
}
.container > aside {
width: 300px;
height: 100%;
border: 1px solid royalblue;
}
.container > main {
flex: 1;
height: 100%;
border: 1px solid red;
}
</style>
感谢 https://www.jianshu.com/p/4d997bd855d3 --来至情义w的启发