Ngx-bootstrap: Is the modal draggable?

[chinra02]

Hi,

Could you please add draggable support to modal to move around.

Thanks

[IlyaSurmay]

Hi! This feature isn't a part of original bootstrap modal so we won't include this functionality to the package.
Although you can use this lib https://www.npmjs.com/package/angular2-draggable (just apply ngDraggable directive on .modal-dialog and there you go)

[chinra02]

Thanks for the update. I will try using angular2-draggable

[zuzhal]

Hi! Thanks for the package :) Anyhow, i have a little problem with the modal. Every time I drag it, move it, dissmis it and then opening it again, it opens and the position where it was moved. Is there anyway how the window can "pop up" at the center of the screen, even if I have moved it before? Thanks!

[andrea-spotsoftware]

@IlyaSurmay do you have an elegant way to do this? Because i'm using modal service, and I can't access the outer modal.

[cmark11]

Is there a way to handle persistence that @zuzhal is referring to?

[ctrl-brk]

@cmark11 https://github.com/xieziyu/angular2-draggable/issues/30

[mattxu-zz]

I wrote a simple library mattxu-zz/ngb-modal-draggable to make ng-bootstrap modal draggable. maybe you could try it.

[volkanokcu]

@IlyaSurmay do you have an elegant way to do this? Because i'm using modal service, and I can't access the outer modal.

@IlyaSurmay @andrea-spotsoftware I have same problem. Using Angular2Dragable(ngDraggable directive). Any solution? Thanks.

[smithbrianscott]

I am using jquery ui to make modals draggable.

https://stackoverflow.com/a/53843281/6559330

[markleusink]

Simple directive (based on the ngx-modal-draggable library mentioned above) to make an ngx-bootstrap modal draggable: https://gist.github.com/markleusink/7af171d5f17e7dc9714e69965fdabab9

[yasstec]

a solution for that is to use :

import { AngularDraggableModule } from 'angular2-draggable'; in your app.module .

in your angular's styles.css put :

`.modal-content > .ng-draggable {
background-color: #fff;
}

.backgroundTransparent .modal-content {
background: transparent !important;
}

.modal-content {
background: transparent !important;
border: none;
}`

in your html put a <div ngDraggable> inside your modal's ng-template :