研究el-tree拖拽h5 drag api实现

代码片段：

<template>
  <div>
    <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :render-content="renderContent"
        draggable
    ></el-tree>
  </div>
</template>


<script>
export default {
  data() {
    return {
      data: [
          {
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          },{
            label: '三级 1-1-2'
          },{
            label: '三级 1-1-3'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dragStart: {},
    };
  },
  methods: {
    dragstart(data, e) {
      this.dragStart = data;
    },
    /**
     *
     * @param data
     * @param e{Event}
     */
    dragover(data, e) {
      e.preventDefault();
    },
    onDrop(data, e) {
      console.log(this.dragStart, 'start');
      console.log(data, 'drop');
    },
    /**
     *
     * @param data
     * @param e {Event}
     */
    ondrag(data, e) {
      e.stopPropagation();
      e.preventDefault();
    },
    renderContent(h, {node, data, store}) {
      return (
          <span
              class="custom-tree-node"
          >
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text"  on-click={() => this.append(data)}>Append</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>Delete</el-button>
            </span>
          </span>);
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>