使 Angular 对话框只能按标题拖动答案

【问题标题】：Make Angular dialog draggable only by title使 Angular 对话框只能按标题拖动
【发布时间】：2021-01-31 04:15:45
【问题描述】：

我已经这样做了：

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

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

【问题讨论】：

升级到 Angular 9 后发生在我身上。似乎无需将 cdkDrag 移动到 Angular 8 中的包装器元素即可工作。

标签： angular draggable angular-cdk-drag-drop material-dialog

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

我想像现在一样拖动整个对话框窗口，但当我点击窗口的任何其他部分时，除了标题。
我明白，这应该是我回答的结果。我测试了它，它对我有用
是的，你是对的，它确实有效，我在组件的整个 html 周围添加了一个 div 包装器，并且需要 cdkDragRootElement=".cdk-overlay-pane"，否则它拖动内容，但宿主元素保持不变。