[javascript] 드래그 앤 드롭 기능을 사용하여 웹 페이지에서 요소를 이동시키는 방법

29 Nov 2023

javascript

드래그 앤 드롭을 구현하는 방법은 여러 가지가 있지만, 이번 예제에서는 JavaScript를 사용하여 구현해보겠습니다. 먼저 HTML 파일을 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>드래그 앤 드롭</title>
    <style>
      .drag {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        position: absolute;
        cursor: pointer;
      }

      .container {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="drag" id="dragElement">드래그 앤 드롭</div>
    </div>

    <script>
      var dragElement = document.getElementById("dragElement");
      var container = document.querySelector(".container");

      dragElement.addEventListener("mousedown", function(event) {
        var startX = event.clientX - dragElement.offsetLeft;
        var startY = event.clientY - dragElement.offsetTop;

        document.addEventListener("mousemove", moveElement);
        document.addEventListener("mouseup", removeListeners);

        function moveElement(event) {
          var newPosX = event.clientX - startX;
          var newPosY = event.clientY - startY;

          if (
            newPosX >= 0 &&
            newPosX + dragElement.offsetWidth <= container.offsetWidth
          ) {
            dragElement.style.left = newPosX + "px";
          }

          if (
            newPosY >= 0 &&
            newPosY + dragElement.offsetHeight <= container.offsetHeight
          ) {
            dragElement.style.top = newPosY + "px";
          }
        }

        function removeListeners() {
          document.removeEventListener("mousemove", moveElement);
          document.removeEventListener("mouseup", removeListeners);
        }
      });
    </script>
  </body>
</html>

이 HTML 코드는 실제로 드래그 앤 드롭 기능을 구현합니다. div with class “drag”가 드래그 대상 요소이고, div with class “container”가 드롭할 수 있는 영역입니다.

JavaScript 코드는 dragElement를 mousedown 이벤트로 등록하여 드래그 시작 시 마우스의 X, Y 위치와 dragElement의 X, Y 위치를 계산합니다. 그런 다음 mousemove 이벤트에 moveElement 함수를 등록하여 드래그 중에 dragElement를 이동시킵니다. 마지막으로 mouseup 이벤트에 removeListeners 함수를 등록하여 드래그를 끝냈습니다.

이 코드를 실행해보면 드래그 앤 드롭 기능을 확인할 수 있습니다. 요소를 클릭하고 드래그하여 원하는 위치로 드롭할 수 있습니다.

이 예제는 간단한 드래그 앤 드롭 기능을 보여주는 것이며, 실제로는 더 복잡한 상황에서 사용될 수 있습니다. 웹 개발에서 드래그 앤 드롭을 구현하는 방법은 다양하니 필요한 상황에 맞게 활용하시면 됩니다.

참고 자료: