เหตุการณ์ ondrop: รันสคริปตเมื่อวางองค์ประกอบที่ลาก (Drop)

เหตุการณ์ ondrop จะถูกกระตุ้นเมื่อผู้ใช้ปล่อย (Drop) องค์ประกอบที่ลากอยู่ บน Drop Target ต้องเรียก event.preventDefault() เพื่อป้องกัน Default Browser Behavior (เช่น เปิดลิงก์/รูปภาพแทน)

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

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .drag-zone {
            float: left; width: 150px; height: 150px;
            border: 2px dashed #876587; margin: 15px; padding: 10px;
            background: #fafafa; transition: background 0.2s;
        }
        .drag-zone.drag-over { background: #e8f5e9; border-color: #4CAF50; }
        .draggable { background: #4CAF50; color: white; padding: 15px; text-align: center; cursor: grab; }
        #status { clear: both; padding: 15px; background: #fff3e0; font-family: monospace; min-height: 50px; }
    </style>
</head>
<body>
    <div class="drag-zone" ondrop="drop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
        <p id="dragItem" draggable="true" 
           ondragstart="dragStart(event)" 
           class="draggable">ลากฉันได้</p>
    </div>
    
    <div class="drag-zone" ondrop="drop(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
        <p>วางที่นี่</p>
    </div>
    
    <div 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(); // สำคัญ! ป้องกัน Default (เช่น Navigate)
            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>

Drop Target Events (ลำดับ)

1. dragenter - เข้าพื้นที่
2. dragover - อยู่ในพื้นที่ (ต้อง preventDefault())
3. dragleave - ออกจากพื้นที่
4. drop - วาง (ต้อง preventDefault()) ⬅️ ที่นี่

DataTransfer ใน Drop Handler

function drop(e) {
    e.preventDefault();
    
    // 1. ข้อมูล Text/HTML ที่ลากมา
    const text = e.dataTransfer.getData('text/plain');
    const html = e.dataTransfer.getData('text/html');
    const url = e.dataTransfer.getData('text/uri-list');
    
    // 2. ไฟล์ที่ลากจาก OS (File API)
    const files = e.dataTransfer.files; // FileList
    for (const file of files) {
        console.log('File:', file.name, file.type, file.size);
        // อ่านไฟล์: const text = await file.text();
    }
    
    // 3. Drop Effect
    console.log('Drop Effect:', e.dataTransfer.dropEffect); // copy, move, link, none
}

การจัดการไฟล์ที่ลากมาจาก Desktop (File Drop)

<div id="dropZone" ondrop="handleDrop(event)" ondragover="handleDragOver(event)">
    ลากไฟล์มาวางที่นี่
</div>

<script>
    function handleDragOver(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }
    
    async function handleDrop(e) {
        e.preventDefault();
        const files = e.dataTransfer.files;
        
        for (const file of files) {
            if (file.type.startsWith('image/')) {
                // Preview รูปภาพ
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.style.maxWidth = '200px';
                document.body.appendChild(img);
            }
            // Upload ไป Server
            // const formData = new FormData(); formData.append('file', file);
            // await fetch('/upload', { method: 'POST', body: formData });
        }
    }
</script>