HTML ondragover 속성 – 유효한 드롭 대상 위로 요소를 드래그할 때 스크립트 실행하는 방법

HTML에서 요소를 유효한 드롭(drop) 대상 위로 드래그하는 순간 특정 스크립트를 실행하고 싶다면 ondragover 속성을 사용하면 됩니다.

ondragover 속성이란?

ondragover는 HTML5 드래그 앤 드롭(Drag and Drop) API에서 제공하는 이벤트 속성으로, 드래그 중인 요소가 유효한 놓기(drop) 대상 위에 있을 때 지속적으로 발생합니다. 기본적으로 브라우저는 요소를 다른 위치에 드롭하는 것을 허용하지 않기 때문에, ondragover 이벤트 핸들러 안에서 반드시 event.preventDefault()를 호출해야 드롭이 정상적으로 동작합니다.

예제 코드

아래 코드를 실행하면 왼쪽 박스를 오른쪽으로, 또는 오른쪽 박스를 왼쪽으로 드래그하여 서로의 위치를 바꿔볼 수 있습니다. 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)" ondrag = "draggingNow(event)" draggable = "true" id = "dragtarget">Drag!</p>
      </div>
      <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div>
      <div id = "box"></div>
      <p>왼쪽 상자를 오른쪽으로 드래그하거나, 오른쪽 상자를 왼쪽으로 드래그해 보세요.</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function draggingNow(event) {
            document.getElementById("box").innerHTML = "드래그 성공!";
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML = "요소가 성공적으로 드롭되었습니다!";
         }
      </script>
   </body>
</html>

코드 설명

위 예제의 핵심 동작은 다음과 같습니다.

dragStart(event): 드래그가 시작될 때 호출되며, dataTransfer.setData()를 통해 드래그 대상 요소의 ID를 저장합니다.
dropNow(event): ondragover 이벤트에서 호출되며, event.preventDefault()로 브라우저의 기본 동작을 막아 해당 영역이 유효한 드롭 대상임을 알려줍니다.
drop(event): 실제로 요소를 놓았을 때 호출되어, 저장된 데이터를 가져온 뒤 해당 요소를 새 위치로 이동시킵니다.

이처럼 ondragover와 preventDefault()를 함께 사용하면 원하는 영역을 자유롭게 드롭 가능한 대상으로 만들 수 있습니다.