Make Angular dialog draggable only by title

Question

I've already done this:

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

But the solution causes the dialog to be draggable by clicking any place of the window which makes impossible to extend <textarea> within the content block. Ideally I need a way to make it draggable only by clicking the title.

Happened to me after upgrading to Angular 9. Seems to be working without moving cdkDrag to a wrapper element in Angular 8. — Kosta_M, Jan 11 '22 at 11:51

score 3 · Accepted Answer · answered Oct 16 '20 at 16:12

3

Set cdkDrag on the element you want to be draggable. Remove cdkDragRootElement since it is not necessary. Leave the cdkDragHandle where it is and it should work.

 <mat-card cdkDrag>
  <mat-card-header cdkDragHandle>
   Text
  </mat-card-header>
 </mat-card>

answered Oct 16 '20 at 16:12

dario

91
1

I want to be draggable the whole dialog window as it's right now, but not when I click to any other part of the window except title. – Supervision Oct 16 '20 at 16:34
I understand and that should be the result of my answer. I tested it and it worked for me – dario Oct 16 '20 at 16:36
Yeah, you are right, it really works, I've added a div wrapper around the whole html of the component and the cdkDragRootElement=".cdk-overlay-pane" is required, cause otherwise it drags content, but the host element remains the same position. – Supervision Oct 18 '20 at 09:10

score 3 · Answer 2 · answered Feb 04 '21 at 13:19

I was able to use dario's answer by combining with Supervision's suggestion. For clarity, result was a dialog, draggable via the title.

HTML as follows:

<div cdkDrag cdkDragRootElement=".cdk-overlay-pane">

    <h2 mat-dialog-title cdkDragHandle>Title Here</h2>

    <mat-dialog-content>
    ... Content here
    </mat-dialog-content>

    <mat-dialog-actions>
    ... Actions here
    </mat-dialog-actions>
</div>

Make Angular dialog draggable only by title

2 Answers2