Topic: Draggable modal
duong do free asked 6 years ago
Dear supporter,
I am using MDB modal and looking for a modal which I can drag to another place like popup window. Is it possible to implement it with MDB frame modal? I did try but still not success.
Thanks in advance
Best regards,
Duong Do
Bartosz Termena staff answered 5 years ago
Dear @TheJakeFromSF
I will recommend you to use MD Bootstrap Draggable plugin: https://mdbootstrap.com/plugins/angular/draggable/
MD Bootstrap Draggable plugin is an extension that allows you to move objects by clicking on them and dragging anywhere within the viewport. is an extension that allows you to move objects by clicking on them and dragging anywhere within the viewport.
To combine MDB modal with Draggable plugin, use the code below:
<div class="container py-5 px-3">
<div class="row mt-4">
<h2 class="mx-auto mb-4">Basic example</h2>
</div>
<div class="row">
<button
type="button"
mdbBtn
color="primary"
class="relative waves-light"
(click)="basicModal.show()"
mdbWavesEffect
>
Launch demo modal
</button>
<div
mdbModal
#basicModal="mdbModal"
class="modal fade bottom"
tabindex="-1"
role="dialog"
aria-labelledby="myBasicModalLabel"
aria-hidden="true"
>
<div #dragParent1 id="draggable-parent-1" class="draggable-parent ">
<div class="col-6 col-md-4">
<div
mdbDraggable
[boundTo]="dragParent1"
id="draggable-basic"
class="card"
>
<div class="modal-dialog modal-frame modal-bottom" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close pull-right"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">
Modal title
</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button
type="button"
mdbBtn
color="secondary"
class="waves-light"
aria-label="Close"
mdbWavesEffect
(click)="basicModal.hide()"
>
Close
</button>
<button
type="button"
mdbBtn
color="primary"
class="relative waves-light"
mdbWavesEffect
>
Save!
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS:
.draggable-parent {
width: 100%;
height: auto;
margin-top: 20rem;
}
.mdb-draggable {
user-select: none;
}
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear Duong Do, For now, we haven't got something like draggable modal, but I'll add this to our nice-to-have list, and we'll think about implementing this in future. Best Regards, Damian