HTML5 드래그 앤 드롭(Drag and Drop) API를 활용하다 보면 dragenter와 dragover 이벤트가 매우 유사해 보여 혼동하기 쉽습니다. 두 이벤트 모두 드래그 중인 요소가 드롭 대상 위에 있을 때 발생하지만, 발생 시점과 역할이 분명히 다릅니다. 이 글에서는 두 이벤트의 차이점과 올바른 사용 방법을 정리해 드립니다.
dragenter 이벤트란?
dragenter 이벤트는 드래그 중인 요소가 유효한 드롭 대상(drop target) 영역으로 처음 진입하는 순간 단 한 번 발생합니다. 이 이벤트의 핵심 목적은 해당 드롭 대상이 드롭을 수락할지 여부를 판단하는 것입니다.
드롭을 수락하려면 반드시 이 이벤트를 취소해야 합니다. 즉, 이벤트 핸들러 안에서 event.preventDefault()를 호출해야 브라우저가 그 영역을 유효한 드롭 지점으로 인식합니다. 이벤트를 취소하지 않으면 이후 drop 이벤트가 아예 발생하지 않으므로 주의해야 합니다.
dragover 이벤트란?
dragover 이벤트는 드래그 중인 요소가 드롭 대상 위에 머무는 동안 일정한 간격으로 계속해서 발생합니다. 이 이벤트는 사용자에게 어떤 피드백(예: 마우스 커서 모양)을 보여줄지 결정하는 데 사용됩니다.
이벤트가 취소되면 피드백(일반적으로 커서)은 dataTransfer.dropEffect 속성 값에 따라 갱신됩니다. copy, move, link 등의 값을 설정하면 드롭 시 어떤 동작이 수행될지 사용자에게 시각적으로 미리 알려줄 수 있습니다.
두 이벤트의 핵심 차이점
- 발생 시점: dragenter는 드롭 대상에 진입할 때 한 번만 발생하고, dragover는 대상 위에 있는 동안 반복적으로 발생합니다.
- 주요 역할: dragenter는 '드롭을 수락할 것인가'를 결정하고, dragover는 '사용자에게 어떤 피드백을 보여줄 것인가'를 결정합니다.
- 공통점: 두 이벤트 모두 기본 동작을 막기 위해
preventDefault() 호출이 필요하며, 이를 생략하면 드롭이 정상적으로 작동하지 않습니다.
실전 코드 예제
const dropZone = document.querySelector('#drop-zone');
dropZone.addEventListener('dragenter', (e) => {
e.preventDefault(); // 드롭 수락 의사 표시
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // 커서 피드백 설정
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
console.log('드롭된 데이터:', data);
});마무리 정리
dragenter와 dragover는 서로를 대체하는 관계가 아니라 상호 보완적인 관계입니다. dragenter로 드롭 가능 여부를 선언하고, dragover로 지속적인 시각적 피드백을 제공하는 것이 HTML5 드래그 앤 드롭 구현의 기본 패턴입니다. 두 이벤트의 역할을 정확히 구분하면 더 직관적이고 안정적인 드래그 앤 드롭 인터페이스를 만들 수 있습니다.