使用 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 部分。

堆栈闪电战：https://stackblitz.com/edit/angular-ivy-putdym

有人可以给个提示吗？

Answer 1

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

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

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

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

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

使用 cdk 拖放时整个 mat-dialog 变成拖动手柄

Whole mat-dialog becomes drag handle when using cdk drag-drop

javascript

angular-material

angular

angular-cdk