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

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

 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>