I have 2 vue draggable tree(TreeA and TreeB). And I want to drag TreeNodeA from TreeA to TreeB. Also like that TreeNodeB from TreeB to TreeA.
UPDATE
And one of the most important property is that tree is a like static structure
. If I drag the one node(this is a product
) there must be drag the only product
inside a node. Not full node. I mean my tree is static. I just want do drag a product
inside a Node.
Is that possible. Any ideas?
Could anyone help me?
Who is someone tried like that?
Finally I solved it. Here is my code
var Main = {
data() {
return {
treeData1: [{
id: 1,
label: "Item 1",
children: [{
id: 4,
label: "Item 1 Child 1",
children: [{id: 9,label: "Item 1 Grand Child 1"},
{id: 9,label: "Item 1 Grand Child 1"}]
}],
}],
treeData2: [{
id: 2,
label: "Item 2",
children: [{
id: 5,
label: "Item 2 Child 1",
children: [{id: 8,label: "Item 2 Grand Child 1"}],
}],
}],
};
},
methods: {
handleDragstart (node, event) {
this.$refs.tree2.$emit('tree-node-drag-start', event, {node: node});
},
handleDragend (draggingNode, endNode, position, event) {
let emptyData = {id: (+new Date), children: []};
this.$refs.tree1.insertBefore(emptyData, draggingNode);
this.$refs.tree2.$emit('tree-node-drag-end', event);
this.$nextTick(() => {
if (this.$refs.tree1.getNode(draggingNode.data)) {
this.$refs.tree1.remove(emptyData);
} else {
let data = JSON.parse(JSON.stringify(draggingNode.data));
this.$refs.tree1.insertAfter(data, this.$refs.tree1.getNode(emptyData));
this.$refs.tree1.remove(emptyData);
}
})
},
returnTrue () {
return true;
},
returnFalse () {
return false;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
.tree {
display: inline-block;
vertical-align: top;
width: 180px;
margin-left: 10px;
height: 300px;
border: 1px solid blue;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.7.16/vue.common.dev.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<div id="app">
<div class="tree-drag">
<el-tree
:data="treeData1"
ref="tree1"
class="tree"
node-key="id"
draggable
default-expand-all
:allow-drop="returnFalse"
@node-drag-start="handleDragstart"
@node-drag-end="handleDragend"
></el-tree>
<el-tree
:data="treeData2"
ref="tree2"
class="tree"
node-key="id"
draggable
default-expand-all
:allow-drop="returnTrue"
></el-tree>
</div>
</div>