Drag and drop dialog box

Question

I am trying to make a dialog box window draggle with cdkDrag directive, currently only the content inside the dialog is movable. How it is possible to move the whole window? stackblitz Thanks!

Answer 1

You have to use cdkDragRootElement directive with selector mentioned inside the attribute value from where you want to enable the dragging element. Adding selector .cdk-overlay-pane makes sure the complete dialog is getting dragged. Along with that cdkDragHandle directive.

<div cdkDrag cdkDragRootElement=".cdk-overlay-pane" class="the_dialog" cdkDragHandle>
   ...
   ...
</div>

Just one suggestion, if you attached cdkDrag to the parent element, it will move the complete dialog box by clicking anywhere on the dialog box. Better just bind that event on mat-dialog-title should be great, in terms of UX.

Restructured HTML

<h1
  mat-dialog-title
  cdkDrag
  cdkDragRootElement=".cdk-overlay-pane"
  cdkDragHandle
>
  Hi
</h1>
<div mat-dialog-content class="the_dialog">
  <p>Move me around</p>
  Test here
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>
    Ok
  </button>
</div>

Stackblitz Here