Drag and Drop API

네이티브 드래그 인터랙션 구현

HTML5 Drag and Drop API는 화면 상의 요소를 클릭하고 드래그하여 다른 위치나 영역(Dropzone)에 떨어뜨리는 동작을 기본적으로 지원합니다. 과거에는 마우스 이벤트(mousedown, mousemove, mouseup)를 조합하여 복잡하게 구현해야 했으나, 이 API를 통해 손쉽게 처리할 수 있습니다.

게시판의 파일 첨부 박스, 칸반 보드(Trello)의 카드 이동, 장바구니 담기 등 데스크톱 웹 애플리케이션 환경에서 직관적인 UX를 제공하기 위해 필수적으로 사용됩니다. (다만 모바일 터치 이벤트와의 호환성을 위해 추가 처리가 필요할 수 있습니다.)

// 기본적인 Drag and Drop 흐름 예제
/*
<div id="drag-item" draggable="true">드래그 할 아이템</div>
<div id="drop-zone">여기에 드롭하세요</div>
*/

// 1. 드래그 시작 이벤트 (데이터 세팅)
const dragItem = document.getElementById('drag-item');
dragItem.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
  // 드래그 시작 시 수행할 로직
});

// 2. 드롭 영역 이벤트 설정
const dropZone = document.getElementById('drop-zone');

// 드롭을 허용하려면 반드시 dragover의 기본 동작을 막아야 합니다.
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); 
});

// 3. 드롭 이벤트 (데이터 수신 및 DOM 조작)
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  if (draggedElement) {
    dropZone.appendChild(draggedElement);
  }
  // 성공 메시지 출력 등 추가 로직
});

// 참고: 드래그 앤 드롭을 위해서는 대상 요소에 draggable='true' 속성을 부여해야 합니다.

실행 결과