如何仅将cdkDragHandle应用于子组件的头部？

算力阿峰

2026-6-27

仅允许头部拖动Angular CDK弹窗的解决方案

核心修改思路

通过Angular CDK的cdkDragHandle指令，指定弹窗头部为唯一可触发拖动的区域，同时保留父容器的全局拖动配置（边界、初始位置等）。

具体修改步骤

保留父组件的拖动容器配置
app.component.html中，<app-popup>上的cdkDrag及相关属性无需移除，这些是控制弹窗拖动范围和初始位置的核心配置：

<app-popup
    cdkDrag
    cdkDragBoundary=".body-container"
    [cdkDragFreeDragPosition]="{ x: -10, y: 0 }"
    [style.width]="'150px'"
    [style.height]="'150px'"
>
</app-popup>

为弹窗头部添加拖动手柄
在item.component.html的头部元素上添加cdkDragHandle指令，将该区域设置为唯一可拖动的触发点：
```
<div class="item">
  <div class="item-header" cdkDragHandle>Drag Here !</div>
  <div class="item-content">Please no drag by here.</div>
</div>
```

导入必要的CDK模块
在包含ItemComponent的Angular模块中，导入DragHandleModule以启用cdkDragHandle指令：

import { DragHandleModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // ...其他已导入模块
    DragHandleModule
  ],
  declarations: [ItemComponent]
})
export class YourFeatureModule { }