Draggable feature in modal popup

[lafiza]

can we have this draggable property for a modal popup ?
I am using ngx-modal to create a modal popup

[xieziyu]

@lafiza
I use the ModalModule in ngx-bootstrap to open the modal popup, so I can just add ngDraggable in modal-content such as:

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <!-- Add ngDraggable Here  -->
    <div class="modal-content" ngDraggable>
      <div class="modal-header">
        <h4 class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>

I can test it in ngx-modal later.

[clabough]

I use something similar to that, but found an issue with not being able to use the mouse to select any text in the modal-content area, so I tried to use a handle for the modal-header like this:

			<div class="modal-content" ngDraggable [handle]="dragHandle">
			  <div class="modal-header" #dragHandle>
				<button type="button" class="close" aria-label="Close" (click)="dismiss()"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title text-center" [innerHtml]="title"></h4>
			  </div>
			  <div class="modal-body">
				<ng-content></ng-content>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-primary" (click)="dismiss()" *ngIf="showFooter">Close</button>
			  </div>
			</div>

but with this, the user must click on an area outside the h4 but part of the modal-header to be able to drag. I've put the handle on the h4 as a workaround, but I could see this being an issue in some scenarios. Can you make the handle work on child elements, or allow for multiple handles?

[ctrl-brk]

@clabough I use your h4 approach, thanks. In order to make the whole header as a drag handle I modified bootstrap styles a bit:

.modal-header {padding: 0}
.modal-header h4 {padding: 15px}
.modal-header button.close {margin: 15px}

[maks-humeniuk]

@ctrl-brk, @clabough, I just moved #dragHandle from <div class="modal-header> to

and it worked without any CSS hacks (which didn't work for me, though). Please notice that my

holds all the <div class="modal-header>'s width. Otherwise it won't work, obviously.