Material: Dialog Positioning and Persistence

[ThomasBurleson]

For some scenarios users want to manually drag and adjust the position of a dialog; perhaps to review obscured content without dismissing the dialog.

Enhanced features for Dialogs include:

• Support open dialog positioned relative-to and offset-from an existing DOM element
• Support dragging to be re-positioned; perhaps with a disableDrag flag
• Support position auto-save and restore;
• Support optional position bounds to constrain drag
• Support position overrides back to default when responsive layout intersects bounds

[epelc]

@ThomasBurleson Is there any way we can make it general enough to work with cards too?

Imagine a dashboard with several cards that you could move around and possibly resize.

[levbrie]

+1

[cah-alexsukhodolsky]

+1

[plato-cambrian]

+1 for directives to do dragging, snapping, etc on cards as well as dialogs (guess it might as well be any element :smile: )

[ThomasBurleson]

Resources:

• https://github.com/bevacqua/dragula

[goranobradovic]

+1

[marioharper]

+1

[aberenyi]

+1

[dneukirchen]

+1

[DallanQ]

+1
Has anyone implemented a solution to the simpler problem of making dialogs draggable? I'm thinking of doing this by making the dialog position absolute and attaching mouse event handlers to the dialog header to update top and left. I have to manually center the dialog on the screen if I do this though. Just wondering if anyone else has already done this.

[manbearwiz]

@DallanQ check out Angular Gridster (Demo) or Dragula (Demo)

[DallanQ]

Thank you @manbearwiz I'm also looking at ngDraggable and Dragabilly.

[fleahy]

+1

[DallanQ]

FWIW, I ended up writing a directive to make modals draggable: https://gist.github.com/rootscity/fcf909f5820407a67c8e

[tztztztztz]

+1

[jwmapana]

+1

[FlamesoFF]

+1

[katak]

+1

[DanielCaspers]

+1

[raynigon]

+1

[thorvx]

+1
When?

[teuf22]

+1

[victorpinheiro]

+1

[edouardsouan]

+1

[Splaktar]

There is no clear guidance on drag and drop or positioning of dialogs in the Material Design spec. It's been 3 years since this issue was opened and that guidance still does not exist.

At this time, I don't believe that drag and drop support for dialogs is viable for this project.

This may be something that is coming to Angular Material at some point in the future. You can track draggable dialogs in https://github.com/angular/material2/issues/2640. And if you have general drag and drop feature requests or feedback, the team is currently looking for uses cases and feedback while working on the drag and drop design document in https://github.com/angular/material2/issues/8963.

[cmark11]

Is there a solution for mat-dialog? The gist in the thread is only for md-dialog... need this or have to switch away from angular-material2... is this an angular2/4/5 framework limitation that prevents even a workaround from being done?

[Splaktar]

@cmark11 Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.