[JavaScript] 간단한 드래그 앤 드롭 예제 (Drag&Drop)

[JavaScript] 간단한 드래그 앤 드롭 예제 (Drag&Drop)

---

See the Pen Untitled by Jay (@ijkgit) on CodePen.

 

 

이 코드는 HTML Drag and Drop API를 사용하여 화면 어디든지 드래그하여 <div> 요소를 놓을 수 있는 간단한 예제입니다.

이 HTML 코드는 드래그 가능한 <div> 요소를 생성하고, 해당 요소를 드래그할 때 실행될 JavaScript 함수를 호출하는 구조를 가지고 있습니다.

 

  function drag(ev) {
    // 드래그하는 요소의 ID를 데이터로 설정
    ev.dataTransfer.setData("text", ev.target.id);
  }

drag 함수는 드래그가 시작될 때 호출되는 함수입니다.

이 함수에서는 ev.dataTransfer.setData("text", ev.target.id);를 사용하여 드래그하는 요소의 ID를 데이터로 설정합니다.

 

  document.addEventListener("dragover", function (event) {
    // 기본 동작 막기
    event.preventDefault();
  });

dragover 이벤트는 드래그 중인 요소가 드롭 가능한 영역 위로 이동할 때 발생합니다. 이 이벤트에서는 event.preventDefault();를 호출하여 브라우저의 기본 동작을 막아주고, 이를 통해 드래그된 요소를 어디든지 이동할 수 있도록 합니다.

 

document.addEventListener("drop", function (event) {
    // 기본 동작 막기
    event.preventDefault();
    // 드래그된 요소의 ID 가져오기
    var data = event.dataTransfer.getData("text");
    // ID를 사용하여 드래그된 요소 가져오기
    var draggedElement = document.getElementById(data);

    // 마우스 좌표 가져오기
    var mouseX = event.clientX;
    var mouseY = event.clientY;

    // 드래그된 요소를 마우스 좌표에 위치시키기
    draggedElement.style.left = mouseX - draggedElement.offsetWidth / 2 + "px";
    draggedElement.style.top = mouseY - draggedElement.offsetHeight / 2 + "px";

    // 드래그된 요소를 body에 추가하기
    document.body.appendChild(draggedElement);
  });

drop 이벤트는 드래그된 요소를 놓았을 때 발생합니다. 이 이벤트에서는 event.preventDefault();를 호출하여 브라우저의 기본 동작을 막고, 드래그된 요소를 마우스의 좌표에 위치시키고, 해당 좌표에 해당하는 위치에 드래그된 요소를 추가합니다.

 

1. event.clientX 및 event.clientY는 현재 마우스의 브라우저 창에서의 X 및 Y 좌표를 나타냅니다.
2. draggedElement.offsetWidth 및 draggedElement.offsetHeight는 드래그된 요소의 너비와 높이를 나타냅니다.
3. draggedElement.style.left 및 draggedElement.style.top은 드래그된 요소의 CSS left 및 top 속성을 설정합니다.

위의 좌표 계산은 마우스가 클릭된 지점에 따라 드래그된 요소를 마우스의 중심 위치에 배치합니다. offsetWidth와 offsetHeight를 사용하여 드래그된 요소의 크기를 고려하여 정확한 위치로 배치하고 있습니다.

 

 

이렇게 함으로써, 사용자는 페이지 어디든지 드래그된 요소를 놓을 수 있게 됩니다. 코드에서는 간단한 예시로 드래그된 요소를 화면 중앙에 놓았습니다.