HTML5의 드래그 앤 드롭 기능에서 요소가 드롭을 정상적으로 받아들이려면, 해당 드롭 대상(drop target)은 최소한 세 가지 이벤트를 수신해야 합니다.
1. dragenter 이벤트
dragenter 이벤트는 드래그된 요소가 드롭 대상 영역에 진입하는 순간 발생하며, 이 대상이 드롭을 허용할지 여부를 판단하는 데 사용됩니다. 드롭을 수락하려면 반드시 이 이벤트를 취소(cancel) 처리해야 하며, 그렇지 않으면 브라우저는 해당 영역을 드롭 불가능한 곳으로 간주합니다.
2. dragover 이벤트
dragover 이벤트는 드래그 중인 요소가 드롭 대상 위에 있는 동안 계속해서 발생하며, 사용자에게 어떤 피드백을 보여줄지 결정하는 역할을 합니다. 이 이벤트를 취소하면, dropEffect 속성 값에 따라 일반적으로 마우스 커서 모양이 업데이트되어 사용자에게 드롭 가능 여부를 시각적으로 알려줍니다.
3. drop 이벤트
마지막으로 drop 이벤트는 실제로 드롭이 수행될 때 발생합니다. 이 이벤트 핸들러 안에서 전송된 데이터를 읽어 들이고, 원하는 로직(예: 파일 추가, 목록 재정렬 등)을 실행함으로써 실질적인 드롭 작업을 완료할 수 있습니다.
정리하면, dragenter → dragover → drop 순서로 세 가지 이벤트를 모두 적절히 처리해야만 HTML5 드래그 앤 드롭이 의도대로 동작합니다.