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

Posted 2023-05-08

【中文标题】使用 cdk 拖放时，整个 mat-dialog 变为拖动句柄

【英文标题】：Whole mat-dialog becomes drag handle when using cdk drag-drop

【发布时间】：2020-09-25 02:39:10

【问题描述】：

我试图在 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

有人可以给个提示吗？

【参考方案1】：

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

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

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

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

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

【讨论】：

感谢您的回复。实际上我之前已经尝试过，但在这种情况下，唯一可移动的部分是对话框部分。我试图做的是使标题成为移动整个对话框的句柄。似乎transform 设置为具有drag 属性的元素。将尝试找到一种方法将其绑定到.cdk-overlay-pane。

我想念你的目标是什么，为你更新我的答案。

非常感谢，这是一个完美的答案！