vue elementui tree 任意级别拖拽功能

我的是根据父级id做的一些判断

<el-tree
          draggable :allow-drop="allowDrop" @node-drop="sort"
          accordion style="font-size:14px;width:250px;"
          ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click-node="false"
          node-key="id" :highlight-current="true" :load="loadNode"
          lazy :render-content="renderContent" @node-click="handleNodeClick"
          empty-text="暂无数据">

     allowDrop(draggingNode, dropNode, type){
     //注掉的是同级拖拽
      /* if (draggingNode.data.level === dropNode.data.level) {
        if (draggingNode.data.aboveId === dropNode.data.aboveId) {
          return type === 'prev' || type === 'next'
        }
      } else {
        // 不同级进行处理
        return false
      } */
      //任意级别拖拽
      if (draggingNode.data.aboveId === dropNode.data.aboveId) {
          return type === 'prev' || type === 'next'
      } else {
        return type === 'prev' || type === 'next' || type === 'inner'
      }
    },
    //拖拽完成之后要重新排序
    /* 
    *  draggingNode:被拖拽节点对应的 Node
    *  dropNode:结束拖拽时最后进入的节点
    *  type: 被拖拽节点的放置位置(before、after、inner)
    *  event
    */
    sort(draggingNode,dropNode,type,event) {
      console.log(draggingNode)
      console.log(dropNode)
      if (draggingNode.data.aboveId === dropNode.data.aboveId) {
        let obj = {
          aboveId:'',
          arr:[]
        }
        obj.aboveId = dropNode.data.aboveId
        for (let item of dropNode.parent.childNodes) {
          obj.arr.push(item.data.id)
        }
        console.log(obj)
        this.updateOrderMe(obj)
      } else {
        let obj = {
          aboveId:'',
          id:'',
          newAboveId:''
        }
        obj.aboveId = draggingNode.data.aboveId
        obj.id = draggingNode.data.id
        obj.newAboveId = dropNode.data.id
        this.randomDrag(obj)
      }
    },
    randomDrag(obj) {
      this.$http
        .post(url, obj).then(res =>{
	        if (!res.data.success) {
	          this.$message.warning(res.data.msg)
	        }
        })
    },
    updateOrderMe(obj) {
      this.$http
        .post(url, {
          aboveId:obj.aboveId,
          ids: obj.arr
        }).then(res =>{
	        if (!res.data.success) {
	          this.$message.warning(res.data.msg)
	        }
        })
    }

猜你喜欢

转载自blog.csdn.net/weixin_43173924/article/details/89638576