Drag and Drop
Drag and Drop (Dateieingabemethode)
Ein Benutzerinteraktionsmuster, bei dem Dateien durch Ziehen vom Desktop oder Dateimanager direkt in den Ablagebereich einer Webanwendung ausgewählt werden – eine intuitive Alternative zu herkömmlichen Dateiauswahldialogen.
Technisches Detail
Die HTML5 Drag and Drop API verwendet die Ereignisse dragenter, dragover, dragleave und drop auf einem Zielelement. Die Eigenschaft dataTransfer.files des drop-Ereignisses liefert eine FileList der abgelegten Dateien. Für Verzeichnisse ermöglicht die Methode DataTransferItem.webkitGetAsEntry() das rekursive Lesen über die File and Directory Entries API. Visuelles CSS-Feedback während dragover (Rahmenhervorhebung, Overlay-Nachrichten) ist entscheidend für die Benutzerfreundlichkeit. Die API funktioniert zusammen mit dem -Fallback für Barrierefreiheit.
Beispiel
```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);
}
});
```