Thực thi script khi phần tử đang được kéo trong HTML?

Sử dụng thuộc tính ondrag (trên phần tử kéo) và ondragover (trên vùng thả) trong HTML để thực thi script khi phần tử đang được kéo.

Ví dụ

Bạn có thể chạy mã sau để triển khai các thuộc tính kéo thả:

<!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 = "Đang kéo...";
      }
      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 = "Thả thành công!";
      }
    </script>
  </body>
</html>