Drag and Drop
Drag and Drop (วิธีอินพุตไฟล์)
รูปแบบการโต้ตอบของผู้ใช้ที่เลือกไฟล์โดยลากจากเดสก์ท็อปหรือตัวจัดการไฟล์ตรงมายัง drop zone ของเว็บแอปพลิเคชัน เป็นทางเลือกที่ใช้งานง่ายแทนกล่องโต้ตอบเลือกไฟล์แบบดั้งเดิม
รายละเอียดทางเทคนิค
HTML5 Drag and Drop API ใช้อีเวนต์ dragenter, dragover, dragleave และ drop บน element เป้าหมาย คุณสมบัติ dataTransfer.files ของอีเวนต์ drop ให้ FileList ของไฟล์ที่วาง สำหรับไดเรกทอรี วิธี DataTransferItem.webkitGetAsEntry() ช่วยอ่านแบบเรียกซ้ำผ่าน File and Directory Entries API การตอบสนองทางภาพด้วย CSS ระหว่าง dragover (ขอบเรืองแสง ข้อความ overlay) สำคัญต่อการใช้งาน API ทำงานร่วมกับ fallback สำหรับการเข้าถึง
ตัวอย่าง
```javascript
// Drag and drop file handler
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
for (const file of files) {
console.log(`${file.name}: ${(file.size/1024).toFixed(1)} KB`);
const data = await file.arrayBuffer();
processFile(data);
}
});
```