Drag and Drop
السحب والإفلات (طريقة إدخال الملفات)
نمط تفاعل مستخدم حيث يتم اختيار الملفات بسحبها من سطح المكتب أو مدير الملفات مباشرة إلى منطقة إفلات تطبيق الويب، مما يوفر بديلاً بديهياً لمربعات حوار اختيار الملفات التقليدية.
التفاصيل التقنية
تستخدم واجهة HTML5 للسحب والإفلات أحداث dragenter وdragover وdragleave وdrop على عنصر هدف. توفر خاصية dataTransfer.files في حدث drop قائمة FileList بالملفات المُفلتة. للمجلدات، تتيح طريقة DataTransferItem.webkitGetAsEntry() القراءة التكرارية عبر File and Directory Entries API. التغذية البصرية المرتدة أثناء dragover (تمييز الحدود، رسائل التراكب) ضرورية لسهولة الاستخدام. تعمل الواجهة إلى جانب كبديل احتياطي لإمكانية الوصول.
مثال
```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);
}
});
```