【WEB】记 Antd 中Tree节点无法拖拽的一个 BUG

362 阅读1分钟

题记:项目中有一个 Antd的一颗树状图,需求是:我需要在拖拽的时候将树节点改变,拖拽后恢复。结果发现这样会导致树节点无法拖拽了?!

原代码很简单:

  1. 拖拽开始时关闭树的虚拟节点模式,然后筛选出可以被拖入的节点。
  2. 拖拽结束后开启树的虚拟模式,然后还原 UI。

PS:这里之所以动态改变虚拟节点,是为了拖动时可滚动,解决Antd 开启虚拟模式后拖拽时无法向上向下滚动。

然后就会发现,树节点有有上面一小部分可以拖动,下面的都不能拖动了。

image.png

那这个问题怎么解决呢?

经过观察分析,我怀疑是拖拽时,拖拽节点还没有被设置好,然后就改变了树节点导致了它所在的位置发生了变化,所以无法拖动了。

于是我们在 onDragStart 中加一个 setTimeout,让刷新过滤滞后。问题得到解决~

image.png

Bye~