Angular 9 cdk Перетаскивание не может выделить текст

Question

По какой-то причине при размещении Angular 9 перетаскивания CDK на div заголовка диалога mat, он сделает весь диалог перетаскиваемым. Это предотвратит выбор пользователями текста в диалоговом окне.

В Angular 7 вы могли только перетаскивать диалоговое окно, фактически перетаскивая div, в который вы поместили свойство перетаскивания cdk.

Is есть ли способ заставить действие перетаскивания происходить только в заголовке диалога мата в Angular 9?

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

  {{title}}
</h1>

<div mat-dialog-content>
  <p>{{message}}</p>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onDismiss()">No</button>
  <button mat-raised-button color="primary" (click)="onConfirm()">Yes</button>
</div>

Я загрузил код с этого сайта https://onthecode.co.uk/how-to-make-angular-material-dialog-draggable-with-cdkdrag/

Answer 1

это только заключить весь диалог в div с помощью cdkDrag и добавить к h1 cdkDragHandle

<div cdkDrag cdkDragRootElement='.cdk-overlay-pane'>
  <h1 mat-dialog-title cdkDragHandle >Hi {{data.name}}</h1>
  ...
 </div>

См. stackblitz