Sự kiện nào xảy ra khi kéo thả phần tử hoàn tất trong JavaScript?

Sự kiện ondragend kích hoạt khi hành động kéo thả kết thúc (sau khi thả chuột).

Ví dụ

<!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">Kéo!</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ử đã thả thành công!";
      }
    </script>
  </body>
</html>