el-tree实现拖拽节点到其他区域

简单的效果图： 

代码实现：

html:

 <!--  拖拽区域      -->
        <div class="down_panel">
          <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"
          >
            <span class="custom-tree-node" slot-scope="{node,data}" :style="{cursor: node.level == 2 ? 'move' : 'not-allowed'}">
                {{data.label}}
            </span>
          </el-tree>

          <div>
            <span>当前拖拽的节点对象</span>
            <span>{{this.nodeArr}}</span>
          </div>

        </div>

js： =》 data

 // 树拖拽
          treeData1: [{
            id: 1,
            label: "一级 1",
            children: [{
              id: 3,
              label: "二级 1-1",
              children: [{id: 9,label: "三级 1-1-1"}]
            }],
          },{
            id: 2,
            label: "二级 2",
            children: [{
              id: 4,
              label: "二级 2-1",
              children: [{id: 5,label: "三级 2-1-1"}]
            }],
          }],
          nodeArr: {},

js：=》 methods:

 handleDragstart (node, event) {
          if(node.level == 2) {
            this.nodeArr = {}
          }
        },
        handleDragend (draggingNode, endNode, position, event) {
          debugger
          if(draggingNode.level == 2) {
            this.nodeArr = draggingNode.data
          }
        },
        returnFalse () {
          return false;
        },