使用cdk拖放时，整个mat-dialog成为拖动句柄

Question

[我试图在Angular Material 9中组合mat-dialog和drag-drop。dialog.html是：

<h1 mat-dialog-title cdkDrag cdkDragHandle cdkDragRootElement=".cdk-overlay-pane">
Title</h1>
<div>
  <p>What's your favorite animal?</p>
</div>
<div mat-dialog-actions>
  <button mat-stroked-button (click)="onExit()">Exit</button>
</div>

但是似乎整个对话框将成为拖动句柄，而不仅仅是dialog-title部分。

stackblitz：https://stackblitz.com/edit/angular-ivy-putdym

有人可以提供提示吗？

Answer 1

您的问题在这里cdkDragRootElement=".cdk-overlay-pane"

您告诉它要拖动的根元素是整个覆盖窗格（通过指定类）。

只需删除该行，它将默认为其所在的元素，或指定标题cdkDragRootElement=".mat-dialog-title"的类。两者都会起作用。该指令的功能是，您可以放置​​较小的拖动柄，以拖动较大的父元素。

编辑：我误解了所需的功能，解决方案是将cdkDrag指令和cdkDragHandle指令基本上分开到不同的元素。这是您的stackblitz的修改版本：

https://stackblitz.com/edit/angular-ivy-ucdjl3