关于element树形组件实现拖拽

直接上码

 <div class="box">
    <div class="left">
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        :auto-expand-parent="false"
        @node-drag-start="handleDragStart"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span class="treetext">
            <svg-icon
              v-if="data.children.length != 0"
              icon-class="folder"
              class-name="tree-icon"
            />
            {{ node.label }}
          </span>
        </span>
      </el-tree>
    </div>
    <div class="right" @drop="drop" @dragover.prevent>
      <div
      
        @click="Dragbtn(item, index)"
        class="listData"
        :style="{ top: item.offsetY + 'px', left: item.offsetX + 'px' }"
        v-for="(item, index) in Dragchildlist"
        :key="index"
        :class="listLength == index ? 'active' : ''"
      >
        {{ item.label }}
      </div>
    </div>
  </div>

.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  width: 250px;
  height: 100%;
  background-color: #fff;
  overflow: auto;
}
.right {
  flex: 1;
  height: 100%;
  background-color: #eceff5;
  position: relative;
  .listData {
    position: absolute;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #2c304d;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    user-select: none;
  }
  .active {
    background: wheat !important;
  }
}

 data: [
        {
          id: 1,
          label: '源/目标',
          children: [
            {
              id: 5,
              label: 'test1',
              children: []
            }
          ]
        },
        {
          id: 2,
          label: '数据预处理',
          children: [
            {
              id: 6,
              label: 'test2',
              children: []
            }
          ]
        },
        {
          id: 3,
          label: '特征分析',
          children: [
            {
              id: 7,
              label: 'test3',
              children: []
            }
          ]
        },
        {
          id: 4,
          label: '统计分析',
          children: [
            {
              id: 8,
              label: '数据视图',
              children: []
            },
            {
              id: 9,
              label: '协方差',
              children: []
            },
            {
              id: 10,
              label: '经验概率密度图',
              children: []
            },
            {
              id: 11,
              label: '全表统计',
              children: []
            },
            {
              id: 12,
              label: '卡方独立性检验',
              children: []
            },
            {
              id: 13,
              label: '卡方拟合性检验',
              children: []
            },
            {
              id: 14,
              label: '箱线图',
              children: []
            },
            {
              id: 15,
              label: '散点图',
              children: []
            },
            {
              id: 16,
              label: '相关系数矩阵',
              children: []
            },
            {
              id: 17,
              label: '双样本T检验',
              children: []
            },
            {
              id: 18,
              label: '单样本T检验',
              children: []
            },
            {
              id: 19,
              label: '正太检验',
              children: []
            },
            {
              id: 20,
              label: '洛伦兹曲线',
              children: []
            },
            {
              id: 21,
              label: '百分位',
              children: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      Dragchildlist: [
        // { children: [], label: '数据视图', offsetX: 541, offsetY: 27 }
      ],
      listLength: 0
    }
 allowDrop(draggingNode, dropNode, type) {
      // 判定节点是否可以放置
      return false
    },
    allowDrag(draggingNode) {
      //
      return draggingNode.data.children.length === 0
    },
    handleDragStart(node, ev) {
      console.log(ev)
      ev.dataTransfer.setData('item', JSON.stringify(node.data))
    },
    drop(event) {
      const obj = JSON.parse(event.dataTransfer.getData('item'))
      this.$set(obj, 'offsetX', event.offsetX)
      this.$set(obj, 'offsetY', event.offsetY)
      this.Dragchildlist.push(obj)
      this.listLength = this.Dragchildlist.length - 1
    },
    Dragbtn(item, index) {
      this.listLength = index
    },

主要是使用drop属性