HTML5 드래그 앤 드롭이 드롭되지 않는 이유와 해결 방법

HTML5 드래그 앤 드롭 기능을 구현할 때 요소가 정상적으로 드롭되지 않는 문제는 초보 개발자들이 자주 겪는 오류 중 하나입니다. 이 글에서는 그 원인과 해결 방법을 코드 예제와 함께 자세히 살펴보겠습니다.

드롭이 되지 않는 원인

드롭이 실행되지 않는 가장 흔한 원인은 dragover 이벤트 핸들러가 정의되어 있지 않기 때문입니다. dragover 이벤트에 별도의 핸들러를 등록하지 않으면 브라우저의 기본 이벤트 핸들러가 그대로 적용되며, 이 경우 해당 영역 위에서 드래그가 끝나더라도 drop 이벤트가 아예 발생하지 않습니다.

즉, drop 이벤트가 트리거되기 전에 반드시 dragover 이벤트에서 e.preventDefault()를 호출해 주어야 합니다.

드롭을 허용하는 방법

요소를 드롭 가능한 영역(drop zone)으로 만들려면 브라우저의 기본 동작을 취소해야 합니다. 취소하는 방법은 두 가지가 있습니다.

• 인라인 속성으로 정의된 이벤트 리스너에서 false를 반환(return)
• 이벤트 객체의 event.preventDefault() 메서드 호출

<div ondragover="return false">
<div ondragover="event.preventDefault()">

위 코드처럼 div 요소에 ondragover 속성을 지정하고 false를 반환하면 기본 동작이 차단되어, 그 영역 안으로 드래그한 요소를 놓을 수 있게 됩니다.

완성된 예제

실제로 드롭까지 처리하려면 다음과 같이 ondrop 핸들러도 함께 작성합니다.

<div id="dropzone"
     ondragover="event.preventDefault()"
     ondrop="event.preventDefault(); alert('드롭 완료!')">
  여기에 파일이나 요소를 끌어다 놓으세요
</div>

정리

HTML5 드래그 앤 드롭이 작동하지 않는다면 대부분 dragover 이벤트에서 기본 동작을 막지 않았기 때문입니다. ondragover="return false" 또는 event.preventDefault()를 추가하면 drop 이벤트가 정상적으로 발생하며, 드롭 기능을 의도대로 구현할 수 있습니다.