如何移除Angular可拖拽元素阴影及Bootstrap模态框拖拽时的backdrop阴影

如果用的是Angular CDK Drag组件，默认拖拽元素和拖拽预览会自带阴影，直接通过CSS覆盖即可：

• 移除常规拖拽元素的阴影：

.cdk-drag {
  box-shadow: none !important;
}

• 移除拖拽过程中预览元素的阴影：

.cdk-drag-preview {
  box-shadow: none !important;
}

如果是自定义拖拽指令，找到对应拖拽元素的类名，用同样方式设置box-shadow: none即可。

这个问题通常是拖拽预览元素的阴影穿透了模态框层级，或是拖拽元素层级低于backdrop导致阴影显示在下方，可通过以下两步解决：

1. 先移除拖拽预览元素的阴影：

.cdk-drag-preview {
  box-shadow: none !important;
}

2. 提升模态框内容的层级，确保拖拽元素在模态框内的层级高于backdrop：

.modal-content {
  z-index: 1060 !important; /* Bootstrap默认modal-backdrop的z-index是1050，设为更高值 */
}
.cdk-drag {
  position: relative;
  z-index: 1; /* 确保拖拽元素在模态框内容内的层级正常 */
}

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