记一次element里面的tree来实现推拽层级判断，以及跨级推拽

推拽规则：推拽不能高于最高层级，同时层级约定为只能为4层。

所以我们在推拽的时候就需要判断推拽不能超出最高层，另外不管我们推拽的是一级还是多级，都需要判断是否超出4层，先看一下具体的demo

这这好是一个四级的树

下面看一下具体的代码实现：

    <div class="container">
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          highlight-current
          draggable
          :allow-drop="allowDrop">
        </el-tree>
      </div>

其中allowDrop这个方法就是用来判断是否允许推拽的

数据结构

data: [{
          id: 'all',
          label: '全部',
          children: [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2',
              children: [{
                id: 11,
                label: '三级 3-2-1'
              }, {
                id: 12,
                label: '三级 3-2-2'
              }, {
                id: 13,
                label: '三级 3-2-3'
              }]
            }]
          }]
        }],

推拽层级的判断思路： 主要是判断推拽的数组有几层，你要放到的那个位置的数组有几层，然后相加判断层级数是否大于四层，如果大于四层返回false, 否则返回true

推拽的数组有几层主要是用递归来计算的

getMaxFloor(value){
    let maxFloor = 0

    for(var i = 0; i < value.length ; i++){
      let currentFloor = 0
      if(!value[i].children || value[i].children === 0)  return 0;
      let children = value[i].children
      currentFloor += 1
      recursion(children)

      function recursion(children){
        children.map(item => {
          if(item.children && item.children.length > 0){
            currentFloor ++ 
            recursion(item.children)
          } else {
            maxFloor = currentFloor > maxFloor ? currentFloor : maxFloor
          }
        })
      }
    }
    return maxFloor
},

allowDrop(draggingNode, dropNode, type) {
    // tree是否允许推拽的方法 return true 可以推拽  否则false
    let dropNodeLevel = dropNode.level   //推拽的哪里的当前层级
    let draggingNodeLevel =  this.getMaxFloor([draggingNode.data])  //推拽元素有几层

    if(dropNode.data.id === 'all'){
      // 判断推拽不能超出最外层
      return false
    } else {
      if(dropNodeLevel + draggingNodeLevel >= 4){
        // 判断两者加起来是否超出规定的层数
        return false
      } else {
        return true
      }
    }
  }

到此就实现了推拽的层级判断，以及跨级拖拽的问题。

如果感觉有用就start一下吧 😄😄 github源码地址

使用中有什么问题，或者不足之处可以随时联系我！！