Draggable modal

duong do asked 7 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


Damian Gemza staff commented 7 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

Is this possible yet? I would really appreciate this.


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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No