JavaScript에서 드래그한 요소가 드롭 대상 위에 있을 때 발생하는 이벤트는?

ondragover 이벤트는 드래그 중인 요소가 드롭 대상(drop target) 위로 지나갈 때 발생합니다. 이 이벤트는 HTML5 드래그 앤 드롭(Drag and Drop) API의 핵심 요소로, 브라우저는 기본적으로 요소의 드롭을 허용하지 않기 때문에 ondragover 핸들러 안에서 반드시 event.preventDefault()를 호출해야 드롭이 정상적으로 동작합니다.

주요 드래그 앤 드롭 이벤트 정리

ondragstart: 요소 드래그가 시작될 때 발생하며, dataTransfer.setData()로 전송할 데이터를 설정합니다.
ondragover: 드래그한 요소가 드롭 대상 위에 있는 동안 지속적으로 발생합니다.
ondrop: 드래그한 요소를 대상 위에 실제로 놓았을 때 발생합니다.
ondragend: 드래그 작업이 종료되었을 때 성공 여부와 관계없이 발생합니다.

예제

다음 코드를 실행하면 JavaScript에서 ondragover 이벤트를 구현하는 방법을 직접 확인할 수 있습니다 −

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         .drag {
            float: left;
            width: 100px;
            height: 35px;
            border: 2px dashed #876587;
            margin: 15px;
            padding: 10px;
         }
      </style>
   </head>

   <body>
      <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)">
         <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag!</p>
      </div>
      <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
      <div id="box"></div>
      <p>Drag the left box to the right or drag the right box to the left.</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function dragEnd(event) {
            document.getElementById("box").innerHTML = "Dragging ends!";
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML = "The element dropped successfully!";
         }
      </script>
   </body>
</html>