Antd Menu结合Beautiful-dnd拖拽视觉异常问题求助

安全阿岳

2026-7-4

问题核心原因

Antd Menu的DOM结构、默认样式与react-beautiful-dnd的拖拽视觉层存在冲突，加上ivt的包裹进一步加剧了样式隔离和节点层级问题，导致拖拽时hover其他菜单项出现消失现象。

具体解决步骤

1. 给拖拽容器添加层级与样式隔离
为拖拽相关的外层容器添加独立类名，设置基础样式避免层级覆盖：
```
.dnd-menu-wrapper {
  position: relative;
  z-index: 1;
}
```
将DragDropContext放在这个容器内，确保拖拽视觉元素不会被Antd的全局样式隐藏。
2. 重写Antd Menu的hover样式
覆盖Antd Menu.Item默认hover样式，消除可能导致布局偏移的属性：
```
.dnd-menu-wrapper .ant-menu-item:hover {
  background-color: #e6f7ff;
  transform: none;
  box-shadow: none;
}
```
避免hover时元素位移，防止拖拽过程中布局跳变。

3. 修正Draggable的ref绑定
Antd Menu.Item会生成嵌套DOM结构，直接绑定provided.innerRef无法获取正确的拖拽节点，需手动指向真实交互元素：

<Draggable draggableId={item.key} index={index}>
  {(provided) => (
    <Menu.Item
      key={item.key}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      ref={(node) => {
        // 指向Menu.Item对应的li元素
        provided.innerRef(node?.closest('li') || node);
      }}
    >
      {item.label}
    </Menu.Item>
  )}
</Draggable>

确保拖拽逻辑绑定到正确的DOM节点，避免视觉层与逻辑层错位。