javascriptcssvue.jstreeviewdraggable

Vue draggable tree nodes from one tree to another


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?


Solution

  • 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>