Thực thi script khi phần tử đang được kéo qua mục thả hợp lệ trong HTML?

Khi một phần tử đang được kéo và thả trong HTML, thuộc tính ondragover kích hoạt.

Ví dụ

Bạn có thể chạy mã sau để triển khai thuộc tính 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">Kéo!</p>
    </div>
    <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
    <div id="box"></div>
    <p>Kéo hộp bên trái sang phải hoặc hộp bên phải sang trái.</p>
    <script>
      function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
      }
      function draggingNow(event) {
        document.getElementById("box").innerHTML = "Đã kéo thành công!";
      }
      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 = "Phần tử đã thả thành công!";
      }
    </script>
  </body>
</html>