Element UI Tree 实现父节点内节点拖拽

由于代码量过大，我这里进行部分代码粘贴 可以好好研究官方文档的api，很有价值
官方api

 <el-tree
      :data="treeData"
      ref="tree"
      :key="tree_key"
      node-key="id" 
      class="margin-top10"
      @node-click="nodeClick"
      :filter-node-method="filterNode"
      :default-expanded-keys="defaultExpand"
      empty-text="选定系统没有组织结构"
      :render-content="renderContent"
      draggable
      :allow-drop="allowDrop"
      @node-drop="sort"
    ></el-tree>

:allow-drop 开始拖拽
@node-drop 拖拽结束时的操作，包括 拖动的节点，结束时的节点，位置，event

我的数据在查询时都是安装sort字段进行排序，直接更改sort字段值即可。
若不存在排序字段，参考思路：将当前父节点下的所有新的排列好的数组更新到原来的数据库中，进行覆盖操作，也可以做一个批量修改，将当前拖拽的两个节点进行交换。

   //节点拖拽 
    allowDrop(draggingNode, dropNode, type){
          //非组织结点拖拽处理
          if (draggingNode.data.type  === 1) {
            return false
          }
          //同一父节点下实现拖拽
          if (draggingNode.data.parentId === dropNode.data.parentId) {
            return type === 'prev' || type === 'next'
          } else {
            // 不同父节点处理
            return false
          }
    },
    //更新节点位置
    sort(draggingNode,dropNode,type,event) {
          draggingNode = draggingNode.data;
          dropNode = dropNode.data;
          // console.log("draggingNode",draggingNode)
          // console.log("dropNode",dropNode)
          // console.log("type",type)
          //拖拽至节点上方
          if (type === 'after') {
            //当前结点已经为最低
            if (draggingNode.sort === 1) {
              return ;
            }
            let params = {
              id :draggingNode.id,
              sort : dropNode.sort - 1,
            };
            //sysOrgUpdate 为服务端接口
            sysOrgUpdate(params).then(res => {
              let _this = this;
              if (res.code === 200) {
                _this.$message({
                  type: "success",
                  message: "节点位置更新成功",
              });
              } else {
                _this.$message({
                  type: "error",
                  message: res.message,
                  });    
              }
            });
          }
          //拖拽至节点下方
          if (type === 'before') {
            //修改移动结点的sort为dropNode结点 sort+1
            let params = {
              id :draggingNode.id,
              sort : dropNode.sort + 1,
            };
            sysOrgUpdate(params).then(res => {
                let _this = this;
              if (res.code === 200) {
                _this.$message({
                  type: "success",
                  message: "节点位置更新成功",
              });
              } else {
                _this.$message({
                  type: "error",
                  message: res.message,
                  });    
              }
            });
          }
          
    },