Drag and Drop
Arrastrar y soltar (método de entrada de archivos)
Un patrón de interacción del usuario donde los archivos se seleccionan arrastrándolos desde el escritorio o administrador de archivos directamente a la zona de destino de una aplicación web, proporcionando una alternativa intuitiva a los diálogos tradicionales de selección de archivos.
Detalle técnico
La API de arrastrar y soltar de HTML5 usa los eventos dragenter, dragover, dragleave y drop en un elemento destino. La propiedad dataTransfer.files del evento drop proporciona un FileList de los archivos soltados. Para directorios, el método DataTransferItem.webkitGetAsEntry() permite la lectura recursiva via la File and Directory Entries API. La retroalimentación visual CSS durante dragover (resaltado de bordes, mensajes de superposición) es crítica para la usabilidad. La API funciona junto con el respaldo para accesibilidad.
Ejemplo
```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);
}
});
```