ant design Vue 的a-tree树形控件设置拖拽节点限制(亲测可用)

 /**
     * @function 部门排序主要逻辑
     */
    onDrop(info) {
      const dropKey = info.node.eventKey //目标节点id
      const dragKey = info.dragNode.eventKey //拖拽节点id
      const dropPos = info.node.pos.split('-') //层级
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      let treeId = this.tree[0].key
      if (dropKey == treeId && [-1, 1].includes(dropPosition)) {
        // 拖拽节点上级为-1,拖拽节点下面为1,正中间为0
        console.log({ info: info, 目标节点: dropKey, 拖拽节点: dragKey, '??层级': dropPos, 层级: dropPosition })
        let { event, node, dragNode, dragNodesKeys } = info
        console.log('实际应用中可获取如下对象属性', {
          event,
          移入的节点: node,
          移动的节点: dragNode,
          当前展开的节点: dragNodesKeys,
        })
        return false
      }
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr)
          }
          if (item.children) {
            return loop(item.children, key, callback)
          }
        })
      }
      const data = [...this.tree]
      // Find dragObject
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, (item) => {
          item.children = item.children || []
          // where to insert 示例添加到尾部,可以是随意位置
          dragObj.parentId = item.key
          item.children.push(dragObj)
        })
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, (item) => {
          item.children = item.children || []
          // where to insert 示例添加到尾部,可以是随意位置
          dragObj.parentId = item.key
          item.children.unshift(dragObj)
        })
      } else {
        let ar
        let i
        loop(data, dropKey, (item, index, arr) => {
          ar = arr
          i = index
        })

        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj)
        } else {
          ar.splice(i + 1, 0, dragObj)
        }
      }

      this.tree = data
      let listarr = [],
        parentId = 0
      this.dragTree(data, parentId, listarr)
      this.sortDepartmentTree(listarr)
    },

重点代码

  const dropKey = info.node.eventKey //目标节点id
      const dragKey = info.dragNode.eventKey //拖拽节点id
      const dropPos = info.node.pos.split('-') //层级
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      //不可拖拽出同级节点的节点id
      let treeId = this.tree[0].key
      判断是否是不可拖拽同级节点id且是同级id的上下拖拽位置
      if (dropKey == treeId && [-1, 1].includes(dropPosition)) {
        // 拖拽节点上级为-1,拖拽节点下面为1,正中间为0
        console.log({ info: info, 目标节点: dropKey, 拖拽节点: dragKey, '??层级': dropPos, 层级: dropPosition })
        let { event, node, dragNode, dragNodesKeys } = info
        console.log('实际应用中可获取如下对象属性', {
          event,
          移入的节点: node,
          移动的节点: dragNode,
          当前展开的节点: dragNodesKeys,
        })
        return false
      }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端J先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值