如何在Antd Tree中禁止拖拽节点到指定节点上？

Antd Tree组件本身并没有droppable='false'这类直接的节点配置项，但可以通过组件提供的拖拽钩子函数实现这个需求，下面是具体的实现思路：

1. 使用beforeDrop钩子阻止放置操作 #

beforeDrop是拖拽结束、实际执行放置动作前触发的钩子，返回false就能直接阻止当前放置行为。你可以给需要禁止被放置的节点添加自定义标识（比如disabledDrop: true），然后在钩子中判断目标节点是否带有这个标识：

import { Tree } from 'antd';

const treeData = [
  { title: '可放置的父节点', key: '1', children: [] },
  { title: '禁止放置的节点', key: '2', disabledDrop: true },
  { title: '子节点A', key: '3', parentKey: '1' },
];

const beforeDrop = (info) => {
  // info.node 是当前被拖拽节点要放置的目标节点
  if (info.node?.disabledDrop) {
    return false; // 阻止放置
  }
  return true; // 允许放置
};

export default function DragTree() {
  return (
    <Tree
      draggable
      beforeDrop={beforeDrop}
      treeData={treeData}
    />
  );
}

2. 自定义拖拽提示样式（可选） #

为了让用户更直观地知道哪些节点不能放置，可以通过onDragEnter和onDragLeave事件修改目标节点的样式：

const onDragEnter = (info) => {
  if (info.node?.disabledDrop) {
    const targetNode = document.getElementById(`tree-node-${info.node.key}`);
    if (targetNode) {
      targetNode.style.backgroundColor = '#f5f5f5';
      targetNode.style.cursor = 'not-allowed';
    }
  }
};

const onDragLeave = (info) => {
  const targetNode = document.getElementById(`tree-node-${info.node.key}`);
  if (targetNode) {
    targetNode.style.backgroundColor = '';
    targetNode.style.cursor = '';
  }
};

// 在Tree组件中添加这两个事件
<Tree
  draggable
  beforeDrop={beforeDrop}
  onDragEnter={onDragEnter}
  onDragLeave={onDragLeave}
  treeData={treeData}
/>

这种方式的优势在于灵活性强，你可以根据节点的任意属性（比如权限、类型）来动态判断是否允许放置，适配各种复杂业务场景。

内容的提问来源于stack exchange，提问作者Dattatreya Kugve