Drag and Drop
Drag and Drop (फ़ाइल इनपुट विधि)
एक उपयोगकर्ता इंटरैक्शन पैटर्न जहाँ फ़ाइलों को डेस्कटॉप या फ़ाइल मैनेजर से सीधे वेब एप्लिकेशन के ड्रॉप ज़ोन में खींचकर चुना जाता है, जो पारंपरिक फ़ाइल पिकर डायलॉग का एक सहज विकल्प प्रदान करता है।
तकनीकी विवरण
HTML5 Drag and Drop API एक लक्ष्य एलीमेंट पर dragenter, dragover, dragleave और drop इवेंट का उपयोग करता है। drop इवेंट की dataTransfer.files प्रॉपर्टी ड्रॉप की गई फ़ाइलों की FileList प्रदान करती है। डायरेक्टरी के लिए, DataTransferItem.webkitGetAsEntry() विधि File and Directory Entries API के माध्यम से रिकर्सिव रीडिंग सक्षम करती है। dragover के दौरान CSS विज़ुअल फ़ीडबैक (बॉर्डर हाइलाइट्स, ओवरले संदेश) उपयोगिता के लिए महत्वपूर्ण है। 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);
}
});
```