เหตุการณ์ ondragstart: รันสคริปตเมื่อเริ่มลาก (Drag Start)

เหตุการณ์ ondragstart จะถูกกระตุ้นเมื่อผู้ใช้เริ่มลาก (Drag) องค์ประกอบที่มี draggable="true" ใช้ตั้งค่าข้อมูลที่จะถ่ายโอนผ่าน DataTransfer API

ตัวอย่างการใช้งาน: Drag & Drop พื้นฐาน

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .drag-zone {
            float: left;
            width: 100px; height: 100px;
            border: 2px dashed #876587;
            margin: 15px; padding: 10px;
            background: #fafafa;
        }
        .draggable {
            background: #4CAF50; color: white;
            padding: 10px; text-align: center;
            cursor: grab;
        }
        .draggable:active { cursor: grabbing; }
        #drop-zone { background: #e8f5e9; border-color: #4CAF50; }
    </style>
</head>
<body>
    <div class="drag-zone" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p id="dragItem" draggable="true" 
           ondragstart="dragStart(event)" 
           ondrag="dragging(event)"
           class="draggable">ลากฉันได้</p>
    </div>
    
    <div class="drag-zone" id="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p>วางที่นี่</p>
    </div>
    
    <div id="status" style="clear: both; margin-top: 20px; padding: 10px; background: #fff3e0;"></div>
    
    <script>
        function dragStart(event) {
            // ตั้งค่าข้อมูลที่จะถ่ายโอน
            event.dataTransfer.setData("text/plain", event.target.id);
            event.dataTransfer.effectAllowed = "move";
            event.target.style.opacity = "0.5";
        }
        
        function dragging(event) {
            document.getElementById("status").textContent = "กำลังลาก...";
        }
        
        function allowDrop(event) {
            event.preventDefault(); // ต้อง preventDefault เพื่ออนุญาต Drop
            event.dataTransfer.dropEffect = "move";
        }
        
        function drop(event) {
            event.preventDefault();
            const data = event.dataTransfer.getData("text/plain");
            const dragged = document.getElementById(data);
            event.target.closest('.drag-zone').appendChild(dragged);
            dragged.style.opacity = "1";
            document.getElementById("status").textContent = "วางสำเร็จ! ✓";
        }
    </script>
</body>
</html>

DataTransfer API สำคัญ

เหตุการณ์ Drag & Drop ครบวงจร

1. ondragstart - เริ่มลาก (Source)
2. ondrag - กำลังลาก (Source, ซ้ำ)
3. ondragenter - เข้าพื้นที่ Drop Target
4. ondragover - อยู่ในพื้นที่ Drop Target (ต้อง preventDefault)
5. ondragleave - ออกจากพื้นที่ Drop Target
6. ondrop - วาง (Target) - ต้อง preventDefault
7. ondragend - จบการลาก (Source) - ทำความสะอาด