Event ใดเกิดเมื่อ Drag Element เสร็จสิ้นใน JavaScript?

Event ondragend ทริกเกอร์เมื่อ การ Drag จบสิ้นสุด (ปล่อยเมาส์/ปล่อยนิ้ว) ไม่ว่าจะ Drop สำเร็จหรือยกเลิก

ตัวอย่างโค้ด: Drag and Drop 完整流程

<!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(); // อนุญาต Drop
      }
      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 Events ลำดับ

1. dragstart — เริ่ม Drag (ตั้งค่า DataTransfer)
2. drag — ระหว่าง Drag (ยิงซ้ำ)
3. dragover — Element ถูก Drag Over (ต้อง preventDefault() เพื่อ Allow Drop)
4. dragenter / dragleave — เข้า/ออก Drop Zone
5. drop — Placed/Dropped (ยิงก่อน dragend)
6. dragend — จบการ Drag เสมอ (Cleanup)

dragend Event Object Properties

• dataTransfer.dropEffect — "none", "copy", "move", "link" (ผลลัพธ์ Drop)
• dataTransfer.effectAllowed — ที่ตั้งค่าไว้ตอน dragstart

การใช้งานจริงใน dragend

• Cleanup: ลบ Ghost Image, Reset Styles
• Analytics: Log Drag Result (Success/Cancel)
• Undo/Redo: บันทึก Action เมื่อ Drop สำเร็จ
• Revert Animation: กลับตำแหน่งเดิมถ้า Drop ไม่สำเร็จ