เหตุการณ์ใดเกิดขึ้นใน JavaScript เมื่อวางองค์ประกอบที่ลาก (Dragged Element) แล้ว

เหตุการณ์ ondrop จะถูกกระตุ้น (trigger) เมื่อมีองค์ประกอบที่ถูกลาก (dragged element) ถูกวาง (dropped) บนเป้าหมาย (target) ลองรันโค้ดด้านล่างเพื่อเรียนรู้การใช้งานเหตุการณ์ ondrop ใน JavaScript:

ตัวอย่าง

<!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>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 dropNow(event) {
        event.preventDefault();
      }
      function dragEnd(event) {
        document.getElementById("box").innerHTML = "Dragging ends!";
      }
      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>

คำอธิบาย: การลาก-วาง (Drag and Drop) ต้องการเหตุการณ์หลัก 3 เหตุการณ์: ondragstart (เริ่มลาก), ondragover (อยู่เหนือเป้าหมาย - ต้อง preventDefault() เพื่ออนุญาตให้วางได้), และ ondrop (วางลงเป้าหมาย) ใช้ event.dataTransfer เพื่อส่งข้อมูลระหว่างการลากและวาง