[javascript] 드래그 앤 드롭 이벤트 핸들링의 원리와 구현 방법

29 Nov 2023

javascript

드래그 앤 드롭 이벤트는 사용자가 마우스를 사용하여 요소를 드래그하고 다른 위치로 이동하는 동작을 의미합니다. 이는 웹 애플리케이션의 사용자 경험을 향상시키는 중요한 기능 중 하나입니다. 오늘은 드래그 앤 드롭 이벤트의 원리와 구현 방법에 대해 알아보겠습니다.

드래그 앤 드롭 이벤트의 원리

드래그 앤 드롭 이벤트의 원리는 세 가지 주요 이벤트를 사용하여 구현됩니다. 이벤트는 다음과 같습니다.

dragstart: 드래그 작업이 시작되면 발생합니다.
drag: 드래그 작업이 진행 중일 때 발생합니다.
dragend: 드래그 작업이 완료되면 발생합니다.

또한, 드래그 앤 드롭 이벤트를 처리하기 위해 몇 가지 추가적인 이벤트가 있습니다.

dragenter: 드래그된 요소가 유효한 드롭 대상 위에 올라갈 때 발생합니다.
dragover: 유효한 드롭 대상 위에서 드래그 작업이 지속되는 동안 계속 발생합니다.
dragleave: 드래그된 요소가 드롭 대상에서 벗어날 때 발생합니다.
drop: 드래그된 요소가 드롭되었을 때 발생합니다.

드래그 앤 드롭 이벤트의 구현 방법

드래그 앤 드롭 이벤트를 구현하는 방법은 다음과 같습니다.

드래그 가능한 요소를 설정하려면 draggable 속성을 true로 설정해야 합니다.

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

dragstart 이벤트 핸들러를 추가하여 드래그 작업을 시작할 때 필요한 동작을 수행합니다.

const draggableElement = document.querySelector('div');

draggableElement.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', event.target.id);
});

유효한 드롭 대상 위에 드래그된 요소를 드롭할 때의 동작은 dragover 이벤트 핸들러로 정의합니다.

const dropZone = document.querySelector('.drop-zone');

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault();
});

드롭이 완료되었을 때의 동작은 drop 이벤트 핸들러로 정의합니다.

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  
  const data = event.dataTransfer.getData('text/plain');
  const draggableElement = document.getElementById(data);
  
  dropZone.appendChild(draggableElement);
});

위의 예제 코드는 간단한 드래그 앤 드롭 기능을 구현하는 방법을 보여줍니다. 실제 구현에는 추가적인 로직과 스타일링이 필요할 수 있습니다.

요약

드래그 앤 드롭 이벤트는 웹 애플리케이션의 사용자 경험을 향상시키는 중요한 기능입니다. 이번 포스트에서는 드래그 앤 드롭 이벤트의 원리와 구현 방법에 대해 알아보았습니다. dragstart, dragover, drop 등의 이벤트를 사용하여 드래그 앤 드롭 동작을 처리할 수 있습니다. 이를 통해 사용자 친화적인 인터페이스를 만들 수 있습니다.

더 자세한 내용은 다음 참고 자료를 확인해주세요.

MDN Web Docs - HTML Drag and Drop API