材质对话框可拖动

Question

环顾四周，我在Stackoverflow上已经找到了相同的q，但没有真正的线索将其与现有样本合并。

如果我遵循Material的基本示例，则可以使用以下方式简单地创建一个对话框

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

并用于打开对话框

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });

我现在遇到的主要问题是如何使MaterialDialog（dialorRef）可移动？只是用附加的<div cdkDrag>包装HTML代码就可以实现否，因为它只会移动文本而不是内容！

有任何提示吗？