Drag and Drop
Drag and Drop (перетаскивание файлов)
Паттерн взаимодействия с пользователем, при котором файлы выбираются перетаскиванием с рабочего стола или файлового менеджера непосредственно в зону сброса веб-приложения, предоставляя интуитивную альтернативу традиционным диалогам выбора файлов.
Техническая деталь
HTML5 Drag and Drop API использует события dragenter, dragover, dragleave и drop на целевом элементе. Свойство dataTransfer.files события drop предоставляет FileList со сброшенными файлами. Для каталогов метод DataTransferItem.webkitGetAsEntry() обеспечивает рекурсивное чтение через File and Directory Entries API. Визуальная обратная связь CSS при dragover (подсветка рамки, сообщения-оверлеи) критически важна для удобства использования. API работает совместно с элементом в качестве запасного варианта для доступности.
Пример
```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);
}
});
```