Bootstrap 모달창 드래그

Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다.

jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다.

 

 

아래는 stackoverflow 참고 사이트 주소입니다.

참고 자료: stackoverflow.com/questions/46192427/how-to-do-draggable-bootstrap-modal

 

핵심 코드

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   
<script>
  $(function () {
    $('.modal-dialog').draggable({
      handle: ".modal-header"
    });
  });
</script>

 

 

Bootstrap Modal 창 드래그하는 3가지 방법 (Javascript, jQuery, jQuery UI)