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

Bootstrap Modal 창의 헤드를 클릭 드래그해서 움직이게 하는 3가지 방법에 대해서 알려 드립니다.

Bootstrap의 Modal에 기본적으로 들어 있지 않은 기능으로 따로 구현해야 하는 기능이기 때문에 이를 구현하는 방법에 대해서 알려 드립니다.

기능 구현은 아래의 3가지 방법으로 구현을 할 것이며, 가장 쉬운 방법부터 소개해 드리겠습니다. 원하시는 방법을 선택 후 사용하시기 바랍니다.

jQuery와 jQuery UI를 이용하는 방법
jQuery만 이용하는 방법
순수 Javascript로 구현하는 방법

그럼, 진행을 시작하겠습니다.

1. jQuery와 jQuery UI를 이용하는 방법

"jQuery"와 "jQuery UI"를 라이브러리를 사용하도록 선언합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

".draggable"함수에 "handle: ".modal-header""를 선언함으로써 구현이 가능합니다.

$(document).ready(function () {
  $(".modal-dialog").draggable({
    handle: ".modal-header"
  });
});

가장 간편하고 쉬운 방법입니다. 하지만, 무거운 "jQuery"와 "jQuery UI"라이브러리를 사용해야 한다는 단점이 있습니다.

아래는 실행가능 한 소스코드 파일입니다.

bootstrap-drag-modal-jquery-ui.html

0.00MB

2. jQuery만 이용하는 방법

"jQuery"라이브러리만 사용하도록 선언합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

"jQuery UI"를 사용할 때와는 다르게, "mousedown", "mousemove", "mouseup" 이벤트를 각 각 구현합니다.

$(document).ready(function () {
  let isDragging = false;
  let offsetX = 0;
  let offsetY = 0;

  $(".modal-header").mousedown(function (e) {
    isDragging = true;
    offsetX = e.pageX - $(this).offset().left;
    offsetY = e.pageY - $(this).offset().top;
  });

  $(document).mousemove(function (e) {
    if (isDragging) {
      $(".modal-dialog").offset({ top: e.pageY - offsetY, left: e.pageX - offsetX });
    }
  });

  $(document).mouseup(function () {
    isDragging = false;
  });
});

"jQuery UI"를 사용할 때와는 다르게 소스가 다소 길어졌습니다. 그리고, 여전히 무거운 "jQuery"라이브러리를 사용한다는 단점이 있습니다.

아래는 실행가능 한 소스코드 파일입니다.

bootstrap-drag-modal-jquery.html

0.00MB

3. 순수 Javascript로 구현하는 방법

const modalHeader = document.querySelector(".modal-header");
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("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`
});

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

소스가 다소 복잡해져서 수정해야하는 작업이 생기는 경우 다소 시간이 걸릴 수 있습니다. 하지만, "jQuery"와 "jQuery UI"라이브러리를 사용하지 않아서, 브라우저의 CPU, 메모리 사용량을 많이 줄였습니다.

아래는 실행가능 한 소스코드 파일입니다.

bootstrap-drag-modal.html

0.00MB

이상으로 Bootstrap Modal 창 드래그하는 3가지 방법에 대해서 알아보았습니다. 가장 선호하는 방법을 선택해서 사용해 보시기 바랍니다.