Vue 可将树节点从一棵树拖动到另一棵树

Question

我有 2 个 vue 可拖动树（TreeA和TreeB）。我想将TreeNodeA从TreeA拖到TreeB。也像TreeNodeB从TreeB到TreeA。

更新

最重要的属性之一是树是一个“like” static structure。如果我拖动一个节点（this is a product），则必须拖动only product节点内部。不是全节点。我的意思是我的树是静态的。我只想将 a 拖到product节点内。

那可能吗。有任何想法吗？

有人可以帮助我吗？

谁有这样的尝试？

Answer 1

最后我解决了。这是我的代码&nbsp;var Main = {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; treeData1: [{&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; label: "Item 1",&nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Item 1 Child 1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [{id: 9,label: "Item 1 Grand Child 1"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 9,label: "Item 1 Grand Child 1"}]&nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; treeData2: [{&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; label: "Item 2",&nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "Item 2 Child 1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [{id: 8,label: "Item 2 Grand Child 1"}],&nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; handleDragstart (node, event) {&nbsp; &nbsp; &nbsp; this.$refs.tree2.$emit('tree-node-drag-start', event, {node: node});&nbsp; &nbsp; },&nbsp; &nbsp; handleDragend (draggingNode, endNode, position, event) {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; let emptyData = {id: (+new Date), children: []};&nbsp; &nbsp; &nbsp; this.$refs.tree1.insertBefore(emptyData, draggingNode);&nbsp; &nbsp; &nbsp; this.$refs.tree2.$emit('tree-node-drag-end', event);&nbsp; &nbsp; &nbsp; this.$nextTick(() => {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if (this.$refs.tree1.getNode(draggingNode.data)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$refs.tree1.remove(emptyData);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let data = JSON.parse(JSON.stringify(draggingNode.data));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$refs.tree1.insertAfter(data, this.$refs.tree1.getNode(emptyData));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$refs.tree1.remove(emptyData);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; },&nbsp; &nbsp; returnTrue () {&nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; },&nbsp; &nbsp; returnFalse () {&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; }}var Ctor = Vue.extend(Main)new Ctor().$mount('#app').tree {&nbsp; display: inline-block;&nbsp; vertical-align: top;&nbsp; width: 180px;&nbsp; margin-left: 10px;&nbsp; height: 300px;&nbsp; border: 1px solid blue;}<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui/lib/index.js"></script><div id="app">&nbsp; <div class="tree-drag">&nbsp; &nbsp; <el-tree&nbsp; &nbsp; &nbsp; :data="treeData1"&nbsp; &nbsp; &nbsp; ref="tree1"&nbsp; &nbsp; &nbsp; class="tree"&nbsp;&nbsp; &nbsp; &nbsp; node-key="id"&nbsp; &nbsp; &nbsp; draggable&nbsp; &nbsp; &nbsp; default-expand-all&nbsp; &nbsp; &nbsp; :allow-drop="returnFalse"&nbsp; &nbsp; &nbsp; @node-drag-start="handleDragstart"&nbsp; &nbsp; &nbsp; @node-drag-end="handleDragend"&nbsp; &nbsp; ></el-tree>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <el-tree&nbsp; &nbsp; &nbsp; :data="treeData2"&nbsp;&nbsp; &nbsp; &nbsp; ref="tree2"&nbsp; &nbsp; &nbsp; class="tree"&nbsp;&nbsp; &nbsp; &nbsp; node-key="id"&nbsp; &nbsp; &nbsp; draggable&nbsp; &nbsp; &nbsp; default-expand-all&nbsp; &nbsp; &nbsp; :allow-drop="returnTrue"&nbsp; &nbsp; ></el-tree>&nbsp; </div></div>