Sự kiện ondrop trong JavaScript – Khi phần tử kéo thả được thả xuống

Sự kiện ondrop kích hoạt khi một phần tử được kéo thả (draggable) bị thả xuống vào vùng đích (drop target).

Ví dụ hoàn chỉnh

<!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>Kéo hộp trái sang phải hoặc ngược lại.</p>
    <script>
      function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); }
      function dropNow(event) { event.preventDefault(); }
      function dragEnd(event) { document.getElementById("box").innerHTML = "Kéo thả kết thúc!"; }
      function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
        document.getElementById("box").innerHTML = "Phần tử đã được thả thành công!";
      }
    </script>
  </body>
</html>