드래그 앤 드롭 기능은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 마우스로 요소를 클릭하고 드래그하여 다른 위치로 이동시킬 수 있는 기능을 말합니다. 이번 글에서는 JavaScript를 사용하여 드래그 앤 드롭 이벤트를 제어하는 방법에 대해 알아보겠습니다.

HTML 마크업 준비하기

드래그 앤 드롭 기능을 구현하기 전에 HTML 요소를 마크업하여 준비해야 합니다. 예를 들어, 드래그할 요소를 만들어야 합니다. 이 요소는 draggable 속성을 추가하여 드래그가 가능하도록 설정할 수 있습니다.

<div id="draggableElement" draggable="true">
  드래그 가능한 요소
</div>

또한 드롭할 영역도 마크업으로 만들어야 합니다. 드롭할 영역은 이벤트를 제어할 때 사용됩니다.

<div id="dropZone">
  드롭할 영역
</div>

JavaScript로 드래그 앤 드롭 이벤트 제어하기

이제 JavaScript를 사용하여 드래그 앤 드롭 이벤트를 제어해보겠습니다. 먼저, 드래그할 요소와 드롭할 영역을 변수에 할당합니다.

const draggableElement = document.getElementById('draggableElement');
const dropZone = document.getElementById('dropZone');

다음으로, 드래그 앤 드롭 이벤트에 대한 이벤트 핸들러를 작성합니다. 이벤트 핸들러는 dragstart, dragover, drop 이벤트를 처리합니다.

draggableElement.addEventListener('dragstart', dragStart);
dropZone.addEventListener('dragover', dragOver);
dropZone.addEventListener('drop', drop);

각각의 이벤트 핸들러는 다음과 같은 기능을 수행합니다.

function dragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
}

function dragOver(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  const draggableElementId = event.dataTransfer.getData('text/plain');
  const draggableElement = document.getElementById(draggableElementId);
  dropZone.appendChild(draggableElement);
}

dragStart 함수는 드래그 시작 시 호출되며, 드래그된 요소의 id를 dataTransfer 객체에 저장합니다.

dragOver 함수는 드롭 영역 위에서 드래그 되는 동안 호출됩니다. 이 함수는 기본 동작인 드롭을 허용하기 위해 preventDefault 메서드를 호출합니다.

drop 함수는 드롭 영역에 요소가 드롭되었을 때 호출됩니다. 이 함수는 dataTransfer 객체에서 드래그된 요소의 id를 가져와서 해당 요소를 드랍 영역에 추가합니다.

마무리

이렇게 JavaScript를 사용하여 드래그 앤 드롭 이벤트를 제어하는 방법에 대해 알아보았습니다. 이를 활용하면 사용자 친화적인 드래그 앤 드롭 기능을 구현할 수 있습니다. 더 자세한 정보는 MDN 웹 문서를 참조하시기 바랍니다.