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?

Parturifacient

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

Orangy

Thanks for replying. I actually have tried that before, but in that case the only movable part is the dialog part. What I was trying to do is to make the title a handle to move the whole dialog. It seems that the transform is set to the element with drag attribute. Will try to find a way to bind that to the .cdk-overlay-pane. – Parturifacient

I miss understood what your goal was, updating my answer for you. – Orangy

Thank you very much, this is the perfect anwser! – Parturifacient