Tree 组件draggable希望精细化到子节点控制

[xu-xiaoya]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

win10， chrome：143.0.7499.170（正式版本），"vue": "^3.5.13"

Reproduction link

Steps to reproduce

1. 在 Tree 组件上设置 draggable={true}
2. 因为没办法单独控制单个节点是否可拖拽，实现 dragstart 事件处理器，在处理器中检查节点是否可拖拽
3. 对于不可拖拽的节点，在 dragstart 中调用 event.preventDefault() 和 event.stopPropagation()
4. 点击选中任意一个节点（比如节点 A）
5. 尝试拖拽一个不可拖拽的节点（比如节点 B），也会显示选中样式，出现两个选中节点
6. 继续尝试拖拽其他不可拖拽节点，会继续增加选中样式

关键问题：preventDefault() 只阻止了浏览器的默认拖拽行为，但 antd 已经：

1. 设置了内部状态（dragState）
2. 添加了CSS class（dragging）
3. 注册了清理监听器
   由于没有触发 dragend 事件，这些状态和样式没有被清理。

What is expected?

不可拖拽节点 B：拖拽操作应该完全失败，没有任何视觉变化，不应该显示选中样式，从源头控制该节点拖拽行为
已选中节点 A：应该保持原有选中状态不变

建议的解决方案

1. 方案 A：增强 draggable 属性，支持函数形式
2. 方案 B：提供分离的拖拽控制 API <a-tree draggable :drag-check="checkIfNodeDraggable" />

What is actually happening?

不可拖拽节点 B：

• 拖拽操作确实被 preventDefault() 阻止了
• 但是节点 B 会显示选中样式（蓝色背景）

已选中节点 A：仍然显示选中样式
最终选择状态：节点 A 和节点 B 同时显示选中样式，出现多选

---

[xu-xiaoya]

antd-react的draggable属性采用的就是方案A，可以控制节点是否可拖拽

[toesbieya]

支持的，文档没写，内部vc-tree支持控制到节点，结果外部tree就写个boolean

<a-tree :draggable="treeDraggable" />

const treeDraggable = {
  nodeDraggable: (data: DataNode) => {
    const { draggable } = (data as any)
    return draggable
  }
} as unknown as boolean

[xu-xiaoya]

是的，我看vc-tree支持，项目已经打了补丁，提了个mr，还没人合：#8478