Bootstrap v5에서 Modal창 드래그하기

Bootstrap v5에서 모달창의 헤더를 마우스로 클릭 후 드래그 해서 움직이게 하는 방법에 대해서 포스팅 진행하겠습니다. BS5에서는 jQuery를 다 들어냈으므로, 순수 자바스크립트로 구현하는 방법으로 진행해 보겠습니다.

 

jQuery로 구현하는 방법은 아래의 링크를 참고하시기 바랍니다.

Bootstrap 모달창 드래그

 

HTML 소스 수정

아래는 BS5의 버튼을 눌러서 모달창을 띄우는 기본 소스입니다.

여기에 모달창을 드래그 하기 위해서 커스텀 속성 "[data-draggable='true']"을 모달의 헤더에 추가합니다.

"<div class="modal-header">"를 "<div class="modal-header" data-draggable="true">"로 변경.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" data-draggable="true">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

자바스크립트 추가하기

아래 소스의 간략한 설명은 아래와 같습니다.

• "mouseDown"이벤트에서 다이얼로그가 드래그 가능하게 플래그를 설정하고, 현재 마우스와 다이얼로그의 위치를 기억합니다.
• "mouseMove"이벤트에서 위치 변화에 따라서 다이얼로그의 좌표를 변화시킵니다.
• "mouseUp"이벤트에서 다이얼로그가 드래그 가능 플래그를 false로 변경하여 드래깅이 되지 않도록 합니다.

const modalHeader = document.querySelector("[data-draggable='true']");
const modalDialog = document.querySelector(".modal-dialog");
let isDragging = false;
let mouseOffset = { x: 0, y: 0 };
let dialogOffset = { left: 0, right: 0 };

modalHeader.addEventListener("mousedown", function (event) {
  isDragging = true;
  mouseOffset = { x: event.clientX, y: event.clientY };
  dialogOffset = {
    left: modalDialog.style.left === '' ? 0 : Number(modalDialog.style.left.replace('px', '')),
    right: modalDialog.style.top === '' ? 0 : Number(modalDialog.style.top.replace('px', ''))
  }
});

document.addEventListener("mouseup", function () {
  isDragging = false;
});

document.addEventListener("mousemove", function (event) {
  if (!isDragging) {
    return;
  }
  let newX = event.clientX - mouseOffset.x;
  let newY = event.clientY - mouseOffset.y;

  modalDialog.style.left = `${dialogOffset.left + newX}px`
  modalDialog.style.top = `${dialogOffset.right + newY}px`
});