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

Event ondragstart ทริกเกอร์เมื่อ เริ่มการ Drag Element (จับเมาส์/สัมผัสแล้วเคลื่อนย้าย) — จุดสำคัญที่สุดคือ ตั้งค่า DataTransfer

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

<!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>

หน้าที่สำคัญของ dragstart

• ตั้งค่า DataTransfer: event.dataTransfer.setData('text/plain', data)
• กำหนด Effect Allowed: event.dataTransfer.effectAllowed = 'copyMove'
• ตั้งค่า Drag Image (Ghost): event.dataTransfer.setDragImage(img, x, y)

DataTransfer Methods

draggable Attribute

• draggable="true" — ทำให้ Element Draggable ได้ (Default: Text/Links/Images = true, อื่นๆ = false)
• draggable="false" — ปิด Drag

หมายเหตุ: ใน dragstart เท่านั้นที่เข้าถึง dataTransfer ได้เต็มรูปแบบ Event อื่นอ่านได้บางส่วน