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