Angular 17中如何实现仅点击MatDialog标题触发拖拽功能？

问题描述 #

在 Angular 7 中，通过在对话框标题上添加 cdkDrag、cdkDragRootElement=".cdk-overlay-pane" 和 cdkDragHandle 指令，可实现仅点击标题时触发对话框拖拽。但在 Angular 17 中采用相同写法时，点击对话框任意区域（包括内容区）都会触发拖拽，导致移动端可滚动内容无法正常滚动。

解决方案 #

调整指令的使用方式，将拖拽根指令绑定到对话框容器，并仅在标题上保留拖拽手柄：

1. 修改对话框模板结构
   将 cdkDrag 和 cdkDragRootElement 移至对话框的外层容器（如包裹整个对话框内容的 div），仅在标题元素上保留 cdkDragHandle：

   <!-- dialog.html -->
   <div cdkDrag cdkDragRootElement=".cdk-overlay-pane">
     <h1 mat-dialog-title cdkDragHandle>
       Hi {{data.name}}
     </h1>
     <div mat-dialog-content>
       <!-- 可滚动内容区域 -->
       <p>这里是对话框内容，支持正常滚动</p>
     </div>
     <div mat-dialog-actions>
       <button mat-button (click)="onNoClick()">取消</button>
       <button mat-button cdkFocusInitial>确认</button>
     </div>
   </div>
   

2. 加固内容区域的滚动兼容性
   若内容区域仍出现拖拽干扰滚动的情况，可在内容容器上添加 cdkDragDisabled 指令，明确禁用该区域的拖拽触发：

   <div mat-dialog-content cdkDragDisabled>
     <!-- 可滚动内容区域 -->
   </div>
   

原理说明 #

Angular 17 中 CDK DragDrop 的事件处理逻辑有所调整：当 cdkDrag 绑定到元素并指定 cdkDragRootElement 后，根元素会成为拖拽目标，但只有带有 cdkDragHandle 的元素才会触发拖拽操作。将 cdkDrag 移至对话框外层容器，配合标题上的 cdkDragHandle，可精准限定拖拽触发区域，同时避免内容区域的滚动事件被拖拽行为干扰。

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