Question

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

更新

最重要的属性之一就是树就像$ ./bin/validshapes enter shape: apples error : invalid input. allowed : circle square rectangle triangle enter shape: squares error : invalid input. allowed : circle square rectangle triangle enter shape: rectangle valid : rectangle。如果我拖动一个节点（static structure），则必须将this is a product拖动到一个节点内。 节点不完整。我的意思是我的树是静态的。我只想在节点内拖动only product。

有可能吗？有什么想法吗？

有人可以帮助我吗？

有人尝试过这样的人吗？

Answer 1

最后我解决了。这是我的代码

 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="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.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>

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

1 个答案: