React拖拽时动态添加类无效：拖拽元素无法显示在顶层

核心原因排查与修复步骤 #

1. 确保z-index生效的前提条件 #

z-index仅对非static定位的元素生效（元素默认position为static）。你需要给.dragging-shelf补充定位属性：

/* basic.module.css */
.dragging-shelf {
  z-index: 100;
  position: relative; /* 或 absolute/fixed/sticky，根据布局需求选择 */
}

2. 检查父元素的堆叠上下文限制 #

如果拖拽元素的父容器创建了堆叠上下文，子元素的z-index只会在该上下文内生效，无法突破到全局顶层。排查父元素是否有以下属性：

• position不为static且设置了z-index
• transform/perspective/filter不为none
• opacity < 1
• display: grid/grid-item且z-index不为auto

修复方案：

• 若父元素不需要堆叠上下文，移除上述属性；
• 若必须保留，将拖拽元素通过React Portal挂载到body标签下，脱离父元素的堆叠上下文。

3. 确认样式未被覆盖 #

打开浏览器开发者工具的「Styles」面板，查看.dragging-shelf的z-index是否被划掉：

• 若被划掉，说明存在优先级更高的样式覆盖了它。可以提升选择器优先级（比如结合元素选择器：.dragging-shelf.shelf-item），或临时用!important（不推荐长期使用）：

.dragging-shelf {
  z-index: 100 !important;
  position: relative;
}

4. 验证操作的是正确的元素 #

部分拖拽库会克隆原元素作为拖拽预览层，你添加类的可能是原元素而非实际显示的预览元素。检查控制台中data.node指向的是否是拖拽时可见的那个DOM节点。

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