Drag and Drop
Arrastar e Soltar (Entrada de Arquivo por Gesto)
Uma interação de interface do usuário onde arquivos são selecionados movendo o cursor do mouse sobre eles, mantendo o botão pressionado e soltando-os em uma zona alvo designada, proporcionando uma alternativa intuitiva à navegação manual de arquivos.
Detalhe técnico
O HTML5 Drag and Drop usa uma sequência de eventos: dragenter, dragover (deve chamar preventDefault() para permitir o drop), dragleave e drop. O objeto DataTransfer nos eventos de drop contém um FileList acessível via dataTransfer.files ou dataTransfer.items. Para segurança, os navegadores proíbem leitura de caminhos de arquivos — apenas nome, tamanho, tipo e conteúdo (via FileReader ou Blob) são acessíveis. Entradas de diretório usam a API DataTransferItem.webkitGetAsEntry() para travessia recursiva. A validação de tipo de arquivo deve verificar tanto a extensão quanto os bytes mágicos de conteúdo, pois tipos MIME de arrastar e soltar não são confiáveis em todos os navegadores.
Exemplo
```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);
}
});
```