Drag and Drop
Sürükle ve Bırak (Dosya Giriş Yöntemi)
Dosyaların masaüstünden veya dosya yöneticisinden doğrudan bir web uygulamasının bırakma alanına sürüklenerek seçildiği, geleneksel dosya seçici iletişim kutularına sezgisel bir alternatif sunan kullanıcı etkileşim kalıbıdır.
Teknik Detay
HTML5 Sürükle ve Bırak API'si hedef elemanda dragenter, dragover, dragleave ve drop olaylarını kullanır. Drop olayının dataTransfer.files özelliği bırakılan dosyaların FileList'ini sağlar. Dizinler için DataTransferItem.webkitGetAsEntry() metodu File and Directory Entries API aracılığıyla özyinelemeli okumayı sağlar. Dragover sırasında CSS görsel geri bildirimi (kenarlık vurguları, katman mesajları) kullanılabilirlik için kritik öneme sahiptir. API, erişilebilirlik için yedek yöntemiyle birlikte çalışır.
Ornek
```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);
}
});
```