Prevent MatDialog from being dragged out of the window

Question

I am currently working on an Angular project. I use the MatDialog from Angular material together with the Angular module of drag and drop. I want to prevent the dialog from being dragged outside of the screen window. Does anyone know how to do this?

Thanks in advance.

score 13 · Accepted Answer · answered Dec 22 '19 at 20:36

13

You can set cdkDragBoundary to .cdk-overlay-container which has the size of the screen.

Stackblitz

answered Dec 22 '19 at 20:36

Eldar

9,781
2
10
35

This works great for keeping my entire draggable dialog within the screen boundaries. Is there a way to keep just _some_ of the dialog handle so contained? I'd like to be able to drag the dialog _mostly_ off-screen with just enough remaining so the user can drag it back on-screen if desired. – Brian White May 30 '23 at 12:40
1

@BrianWhite that requires rewriting `cdkDrag` directive. – Eldar May 30 '23 at 14:11

score 0 · Answer 2 · answered Dec 19 '19 at 22:27

0

Can't you set a box with the size of your screen (like an overlay) and create the drag in drog inside ? Like this example : https://stackblitz.com/angular/omronldbxey?file=src%2Fapp%2Fcdk-drag-drop-boundary-example.ts

answered Dec 19 '19 at 22:27

Jean-Bryce Beirnaert

1

Prevent MatDialog from being dragged out of the window

2 Answers2