使 Angular 对话框只能通过标题拖动

Question

我已经这样做了：

<div mat-dialog-title
     cdkDrag
     cdkDragRootElement=".cdk-overlay-pane"
     cdkDragHandle>
</div>

但该解决方案导致对话框可以通过单击窗口的任何位置进行拖动，这使得对话框无法<textarea>在内容块内扩展。理想情况下，我需要一种方法使其仅通过单击标题即可拖动。

Answer 1

通过结合监督的建议，我能够使用达里奥的答案。为了清楚起见，结果是一个对话框，可通过标题拖动。

HTML如下：

<div cdkDrag cdkDragRootElement=".cdk-overlay-pane">

    <h2 mat-dialog-title cdkDragHandle>Title Here</h2>

    <mat-dialog-content>
    ... Content here
    </mat-dialog-content>

    <mat-dialog-actions>
    ... Actions here
    </mat-dialog-actions>
</div>

Answer 2

在您想要可拖动的元素上设置 cdkDrag。删除 cdkDragRootElement，因为它不是必需的。将 cdkDragHandle 保留在原来的位置，它应该可以工作。

 <mat-card cdkDrag>
  <mat-card-header cdkDragHandle>
   Text
  </mat-card-header>
 </mat-card>