HTML5 드래그 앤 드롭: dragLeave가 drop보다 먼저 발생하는 문제 해결하기

문제 상황: dragLeave가 drop보다 먼저 실행되는 현상

HTML5 드래그 앤 드롭(Drag and Drop) API를 사용하다 보면 의도와 달리 dragleave 이벤트가 drop 이벤트보다 먼저 발생하는 경우가 있습니다. 이로 인해 요소가 드롭되기 전에 하이라이트 제거나 상태 초기화 같은 로직이 실행되어 화면이 깜빡이거나 데이터가 유실되는 문제가 생길 수 있습니다.

해결 방법: dragover에서 stopPropagation() 호출하기

이 문제를 해결하는 핵심은 dragover 이벤트 핸들러에서 stopPropagation()을 호출하는 것입니다. 이렇게 하면 불필요한 이벤트 전파가 차단되어 dragleave가 드롭 완료 전에 트리거되는 현상을 막을 수 있습니다.

onDragOver = function(e) {
    e.stopPropagation();
}

참고로, 대상 영역에 실제로 요소를 드롭할 수 있게 하려면 dragover 핸들러에서 e.preventDefault()도 함께 호출하는 것이 좋습니다. 브라우저는 기본적으로 드롭을 허용하지 않기 때문입니다.

drop 이벤트 처리 코드 작성

드롭이 정상적으로 동작하도록 설정했다면, 이제 drop 이벤트 핸들러에서 드래그된 데이터를 처리합니다. 아래는 전형적인 구현 예시입니다.

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

위 코드의 동작 순서는 다음과 같습니다.

• preventDefault(): 브라우저의 기본 동작(링크 열기 등)을 막아 드롭 로직이 실행되도록 합니다.
• getData("Text"): 드래그 시작 시 저장해 둔 데이터를 가져옵니다.
• appendChild(): 해당 ID를 가진 요소를 드롭 대상 영역으로 이동시킵니다.

정리

드래그 앤 드롭 구현 시 dragleave가 drop보다 먼저 발생하는 문제는 dragover 단계에서 stopPropagation()(필요하다면 preventDefault()까지)을 호출하는 것만으로 간단히 해결할 수 있습니다. 이벤트 흐름을 명확히 제어하면 깜빡임 없는 안정적인 드래그 앤 드롭 인터페이스를 만들 수 있습니다.