我已经这样做了:
<div mat-dialog-title
cdkDrag
cdkDragRootElement=".cdk-overlay-pane"
cdkDragHandle>
</div>
但是该解决方案导致对话框可以通过单击窗口的任何位置来拖动,这使得无法<textarea>
在内容块内扩展。理想情况下,我需要一种仅通过单击标题才能使其可拖动的方法。
我已经这样做了:
<div mat-dialog-title
cdkDrag
cdkDragRootElement=".cdk-overlay-pane"
cdkDragHandle>
</div>
但是该解决方案导致对话框可以通过单击窗口的任何位置来拖动,这使得无法<textarea>
在内容块内扩展。理想情况下,我需要一种仅通过单击标题才能使其可拖动的方法。
通过结合监督的建议,我能够使用达里奥的答案。为清楚起见,结果是一个对话框,可通过标题拖动。
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>
在要拖动的元素上设置 cdkDrag。删除 cdkDragRootElement,因为它不是必需的。将 cdkDragHandle 留在原处,它应该可以工作。
<mat-card cdkDrag>
<mat-card-header cdkDragHandle>
Text
</mat-card-header>
</mat-card>