Drag and Drop
Kéo và thả (Phương thức nhập tệp)
Mẫu tương tác người dùng cho phép chọn tệp bằng cách kéo chúng từ máy tính để bàn hoặc trình quản lý tệp trực tiếp vào vùng thả của ứng dụng web, cung cấp giải pháp trực quan thay thế cho hộp thoại chọn tệp truyền thống.
Chi tiết kỹ thuật
HTML5 Drag and Drop API sử dụng các sự kiện dragenter, dragover, dragleave và drop trên phần tử đích. Thuộc tính dataTransfer.files của sự kiện drop cung cấp FileList các tệp đã thả. Cho thư mục, phương thức DataTransferItem.webkitGetAsEntry() cho phép đọc đệ quy qua File and Directory Entries API. Phản hồi trực quan CSS trong khi dragover (đường viền nổi bật, thông báo lớp phủ) rất quan trọng cho khả năng sử dụng. API hoạt động cùng dự phòng để đảm bảo khả năng tiếp cận.
Ví dụ
```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);
}
});
```