Whole mat-dialog becomes drag handle when using cdk drag-drop

Question

I was trying to combine mat-dialog and drag-drop in Angular Material 9.
The dialog.html is:

<h1 mat-dialog-title cdkDrag cdkDragHandle cdkDragRootElement=".cdk-overlay-pane">
Title</h1>
<div>
  <p>What's your favorite animal?</p>
</div>
<div mat-dialog-actions>
  <button mat-stroked-button (click)="onExit()">Exit</button>
</div>

But it seems that the whole dialog becomes the drag handle instead of just the dialog-title part.

stackblitz: https://stackblitz.com/edit/angular-ivy-putdym

Could someone please give a hint?

Answer 1

Your problem is here cdkDragRootElement=".cdk-overlay-pane"

You are telling it that the root element to drag is the entire overlay pane (by specifying the class).

Just remove that line and it will default to the element it is on, or specify the class for the title cdkDragRootElement=".mat-dialog-title" . Either will work. The function of that directive is so you can put a smaller drag handle that drags a larger parent element.

Edit: I misunderstood what the desired functionality was, the solution is to basically seperate the cdkDrag directive and cdkDragHandle directive to different elements. Here is a modified version of your stackblitz:

https://stackblitz.com/edit/angular-ivy-ucdjl3