Drag and Drop
Glisser-Déposer (Saisie de Fichier par Geste)
Une interaction d'interface utilisateur où les fichiers sont sélectionnés en déplaçant le curseur de la souris dessus, en maintenant le bouton enfoncé et en les relâchant dans une zone cible désignée, offrant une alternative intuitive à la navigation manuelle de fichiers.
Détail technique
Le Drag and Drop HTML5 utilise une séquence d'événements : dragenter, dragover (doit appeler preventDefault() pour permettre le drop), dragleave et drop. L'objet DataTransfer dans les événements de drop contient un FileList accessible via dataTransfer.files ou dataTransfer.items. Pour la sécurité, les navigateurs interdisent la lecture des chemins de fichiers — seuls le nom, la taille, le type et le contenu (via FileReader ou Blob) sont accessibles. Les entrées de répertoire utilisent l'API DataTransferItem.webkitGetAsEntry() pour la traversée récursive. La validation du type de fichier doit vérifier à la fois l'extension et les octets magiques du contenu, car les types MIME du glisser-déposer ne sont pas fiables sur tous les navigateurs.
Exemple
```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);
}
});
```