เหตุการณ์ ondragover: รันสคริปตเมื่อลากองค์ประกอบอยู่เหนือ Drop Target

เหตุการณ์ ondragover จะถูกกระตุ้นซ้ำๆ ขณะที่องค์ประกอบถูกลาก (Drag) อยู่เหนือพื้นที่ที่รับการวาง (Drop Target) ต้องเรียก event.preventDefault() เพื่ออนุญาตให้ Drop ได้ (Default behavior ของเบราว์เซอร์คือไม่อนุญาต Drop)

ตัวอย่างการใช้งาน (ร่วมกับ Drag & Drop ครบวงจร)

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .drop-zone {
            float: left; width: 200px; height: 150px;
            border: 2px dashed #876587; margin: 15px; padding: 10px;
            background: #fafafa; transition: background 0.2s;
        }
        .drop-zone.drag-over { background: #e8f5e9; border-color: #4CAF50; }
        .draggable { background: #4CAF50; color: white; padding: 10px; cursor: grab; }
    </style>
</head>
<body>
    <div class="drop-zone" id="zone1" ondrop="drop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
        <p id="item" draggable="true" ondragstart="dragStart(event)" class="draggable">ลากฉัน</p>
    </div>
    
    <div class="drop-zone" id="zone2" ondrop="drop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
        <p>วางที่นี่</p>
    </div>
    
    <div style="clear:both; padding: 10px;" id="status"></div>
    
    <script>
        function dragStart(e) {
            e.dataTransfer.setData("text/plain", e.target.id);
            e.dataTransfer.effectAllowed = "move";
            e.target.style.opacity = "0.5";
        }
        
        function dragOver(e) {
            e.preventDefault(); // สำคัญ! อนุญาต Drop
            e.dataTransfer.dropEffect = "move";
            e.currentTarget.classList.add('drag-over');
        }
        
        function dragLeave(e) {
            e.currentTarget.classList.remove('drag-over');
        }
        
        function drop(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('drag-over');
            const id = e.dataTransfer.getData("text/plain");
            const el = document.getElementById(id);
            e.currentTarget.appendChild(el);
            el.style.opacity = "1";
            document.getElementById('status').textContent = "วางสำเร็จ! ✓";
        }
    </script>
</body>
</html>

เหตุการณ์ Drag & Drop ลำดับ (บน Drop Target)

1. ondragenter - เข้าพื้นที่ (ครั้งแรก)
2. ondragover - อยู่ในพื้นที่ (ซ้ำๆ ตลอดการลาก) ⚡ ต้อง preventDefault()
3. ondragleave - ออกจากพื้นที่
4. ondrop - วาง (ต้อง preventDefault())

Drop Effect Visual Feedback

function dragOver(e) {
    e.preventDefault();
    // แสดง Cursor ตามประเภท
    if (e.dataTransfer.types.includes('Files')) {
        e.dataTransfer.dropEffect = 'copy'; // ไอคอน +
    } else {
        e.dataTransfer.dropEffect = 'move'; // ไอคอน ลูกศร
    }
    e.currentTarget.style.borderColor = '#4CAF50';
}