드래그 앤 드롭으로 HTML 요소 옮기기

드래그 앤 드롭을 이용하여 HTML 요소를 옮기는 방법

<!-- 드래그앤드롭을 사용할 요소 -->
<div id="dragme" draggable="true">🐶</div>

<!-- 드롭할 영역 -->
<div id="drophere">여기에 드롭하세요</div>

draggable 속성은 HTML 요소가 드래그 앤 드롭을 지원하는지 여부를 나타내는 불리언 속성입니다. 이 속성을 true 로 설정하면 해당 요소를 드래그할 수 있습니다.

드래그 앤 드롭 이벤트를 처리하는 JavaScript 코드

const dragMe = document.getElementById("dragme");
const dropHere = document.getElementById("drophere");

// 드래그 시작
dragMe.addEventListener("dragstart", (event) => {
  // 드래그한 요소의 id 값을 설정
  event.dataTransfer.setData("text/plain", event.target.id);
});

// 드롭 영역에 들어왔을 때
dropHere.addEventListener("dragenter", () => {
  // 드롭 영역에 초점을 줌
  dropHere.classList.add("highlight");
});

// 드롭 영역에서 벗어났을 때
dropHere.addEventListener("dragleave", () => {
  // 드롭 영역에서 초점을 해제
  dropHere.classList.remove("highlight");
});

// 드롭을 허용할 때
dropHere.addEventListener("dragover", (event) => {
  // 드롭을 허용하기 위해 기본 동작을 막음
  event.preventDefault();
});

// 드롭을 했을 때
dropHere.addEventListener("drop", (event) => {
  // 드롭을 허용하기 위해 기본 동작을 막음
  event.preventDefault();

  // 드롭한 요소의 id 값을 가져옴
  const id = event.dataTransfer.getData("text");

  // 드롭한 요소를 드롭 영역에 추가
  const draggableElement = document.getElementById(id);
  dropHere.appendChild(draggableElement);

  // 드롭 영역에서 초점을 해제
  dropHere.classList.remove("highlight");
});

event.dataTransfer.setData("text/plain", event.target.id)는 Drag and Drop 이벤트에서 드래그 중인 요소를 식별하기 위해 사용되는 메서드입니다.

dataTransfer 객체는 드래그 중인 요소를 다른 요소로 전달할 때 사용됩니다. setData() 메서드를 사용하여 dataTransfer 객체에 데이터를 추가할 수 있습니다. 첫 번째 인수는 데이터의 유형을 지정하고, 두 번째 인수는 데이터 자체를 지정합니다.

위의 코드에서는 첫 번째 인수로 "text/plain"을 지정하여 일반적인 텍스트 데이터를 전달하고, 두 번째 인수로 event.target.id를 지정하여 드래그 중인 요소의 ID를 전달합니다. 이후 드래그한 요소를 식별하기 위해 event.dataTransfer.getData("text") 메서드를 사용하여 데이터를 검색할 수 있습니다.

즉, dragStart 함수는 드래그 작업을 시작할 때, dataTransfer 객체에 현재 드래그 중인 요소의 ID를 추가하여 드래그 중인 요소를 식별할 수 있도록 합니다.

위 코드에서 dragstart 이벤트에서 dataTransfer 객체의 setData() 메서드를 사용하여 드래그한 요소의 id 값을 설정합니다. 이후, dragenter 이벤트에서 드롭 영역에 초점을 주고, dragleave 이벤트에서 초점을 해제합니다. dragover 이벤트에서는 드롭을 허용하기 위해 기본 동작을 막고, drop 이벤트에서는 드롭한 요소를 드롭 영역에 추가합니다.

이렇게 작성된 코드는 dragme 요소를 드래그하면 drophere 요소에 드롭할 수 있습니다.

여러개 요소를 드래그 앤 드롭하기

<!-- 드래그앤드롭을 사용할 요소 -->
<div id="dragme" draggable="true" class="fox">🦊</div>
<div id="dragme" draggable="true" class="dog">🐶</div>

<!-- 드롭할 영역 -->
<div id="drophere">여기에 드롭하세요</div>

const dragMes = document.querySelectorAll("#dragme");
const dropHere = document.getElementById("drophere");

dragMes.forEach((dragMe) => {
  console.log(dragMe);
  // 드래그 시작
  dragMe.addEventListener("dragstart", (event) => {
    // 드래그한 요소의 class 값을 설정
    event.dataTransfer.setData("text/plain", event.target.classList[0]);
  });

  // 드롭 영역에 들어왔을 때
  dropHere.addEventListener("dragenter", () => {
    // 드롭 영역에 초점을 줌
    dropHere.classList.add("highlight");
  });

  // 드롭 영역에서 벗어났을 때
  dropHere.addEventListener("dragleave", () => {
    // 드롭 영역에서 초점을 해제
    dropHere.classList.remove("highlight");
  });

  // 드롭을 허용할 때
  dropHere.addEventListener("dragover", (event) => {
    // 드롭을 허용하기 위해 기본 동작을 막음
    event.preventDefault();
  });

  // 드롭을 했을 때
  dropHere.addEventListener("drop", (event) => {
    // 드롭을 허용하기 위해 기본 동작을 막음
    event.preventDefault();

    // 드롭한 요소의 class 값을 가져옴
    const className = event.dataTransfer.getData("text");

    // 드롭한 요소를 드롭 영역에 추가
    const draggableElement = document.getElementsByClassName(className)[0];
    dropHere.appendChild(draggableElement);

    // 드롭 영역에서 초점을 해제
    dropHere.classList.remove("highlight");
  });
})