HTML ondragover 속성 – 요소를 드래그하는 동안 스크립트 실행하기

HTML에서 ondragover 속성을 사용하면 요소가 드래그되는 동안(드래그된 요소가 유효한 드롭 대상 위를 지나갈 때) 지정한 스크립트를 실행할 수 있습니다.

드래그 앤 드롭 기능을 구현하려면 ondragover와 함께 ondragstart, ondrop 같은 관련 이벤트 속성들을 함께 사용하는 것이 일반적입니다. 특히 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>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 draggingNow(event) {
            document.getElementById("box").innerHTML = "Dragged successfully!";
         }
         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 = "The element dropped successfully!";
         }
      </script>
   </body>
</html>

코드 설명

dragStart(): 드래그가 시작될 때 dataTransfer.setData()로 드래그 대상 요소의 ID를 저장합니다.
draggingNow(): 요소가 드래그되는 동안 화면에 성공 메시지를 표시합니다.
dropNow(): ondragover 이벤트에서 호출되며, event.preventDefault()로 기본 동작을 차단해 드롭이 가능하도록 합니다.
drop(): 드롭이 발생하면 저장된 데이터를 가져와 해당 요소를 새 위치로 이동시키고 완료 메시지를 출력합니다.