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

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

<div class="dnd-container">
  <div id="draggable" draggable="true" class="box">드래그 하세요!</div>
  <div id="dropzone" class="zone">이곳에 드롭하세요</div>
</div>