Event ใดเกิดเมื่อ Element กำลังถูก Drag ใน JavaScript?

Event ondrag ทริกเกอร์ ซ้ำๆ ตลอดการ Drag (High Frequency) ระหว่างที่ User จับ Element อยู่และเคลื่อนย้าย

ตัวอย่างโค้ด

<!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">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 draggingNow(event) { document.getElementById("box").innerHTML = "Dragged successfully!"; }
      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 = "The element dropped successfully!";
      }
    </script>
  </body>
</html>

คำอธิบาย

• ondrag — ยิงซ้ำๆ (ทุก ~frames) ระหว่าง Drag
• ต่างจาก dragstart (ครั้งแรก) และ dragend (ครั้งสุดท้าย)
• ในตัวอย่าง: อัปเดต UI ทุกครั้งที่ Drag ("Dragged successfully!")

⚠️ Performance Warning

drag Event ยิง มากมาย (60fps+) — อย่าทำ Heavy Work ใน Handler

• ❌ ไม่ควร: DOM Manipulation, Complex Calculation, Network Request
• ✅ ควร: Update Simple UI State, Throttle/Debounce

ตัวอย่าง Throttle Drag

let dragTimer;
element.addEventListener('drag', (e) => {
  if (!dragTimer) {
    dragTimer = requestAnimationFrame(() => {
      // Update UI ที่นี่ (Max 60fps)
      updateDragPreview(e.clientX, e.clientY);
      dragTimer = null;
    });
  }
});

Drag Events Summary

1. dragstart — เริ่ม (Set DataTransfer)
2. drag — ระหว่าง Drag (High Frequency)
3. dragover — Over Drop Zone (preventDefault เพื่อ Allow Drop)
4. dragenter / dragleave — เข้า/ออก Zone
5. drop — วางลง Drop Zone
6. dragend — จบ Drag (Cleanup)