Angular CDK DragBoundary失效：拖拽组件超出边界范围

问题根源 #

1. 定位冲突：chat-notification使用position: fixed，这类元素脱离文档流，偏移父元素（offsetParent）为视口而非.main-content，导致cdkDragBoundary无法识别目标边界容器。
2. 边界容器无明确尺寸：.main-content未设置宽高，CDK无法计算有效的拖拽范围边界。

修复步骤 #

1. 给边界容器设置明确尺寸与定位上下文 #

修改default-layout.component.scss，为.main-content添加以下样式：

.main-content {
  width: 100vw;
  height: 100vh;
  position: relative; // 建立定位上下文，让子元素的absolute定位基于此容器
  overflow: hidden; // 可选，防止拖拽元素超出容器后显示
}

2. 调整拖拽组件的定位方式 #

修改chat-notification.component.scss，将fixed定位改为absolute，让组件处于.main-content的定位上下文中：

.chat-notification {
  position: absolute; // 替换原fixed
  width: 200px;
  height: 47px;
  bottom: 20px;
  left: 20px;
  z-index: 9;
  background: $color-white;

  .chat-title {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50);
    padding-left: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: $color-white;
  }
}

3. 优化边界选择器（可选） #

将cdkDragBoundary的选择器从类选择器改为ID选择器，避免可能的类名冲突：

<div class="issue-chats" cdkDrag #draggable="cdkDrag" cdkDragBoundary="#main-content">
  <app-chat-notification (click)="openChatModal(issue)" ngIf="issue.isMinimize" [issue]="issue" [styleLeft]="i>0?(i*220+20):20"></app-chat-notification>
</div>

验证逻辑 #

修改后，拖拽组件的定位上下文变为.main-content，CDK能正确读取容器的宽高尺寸，从而限制拖拽范围在容器内部。

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