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
      }

这篇好文章是转载于：学新通技术网