Draggable modal

Is this possible yet? I would really appreciate this.

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.