Événements `dragover` et `drop`
Définissez les cibles de dépôt valides et gérez l’événement `drop`.
Événements `dragover` et `drop` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Les cibles de dépôt ont besoin de deux gestionnaires
Une cible de dépôt doit gérer à la fois dragover (pour autoriser le dépôt) et drop (pour le recevoir). Sans dragover, le navigateur refuse de déclencher drop, car son comportement par défaut est qu’« aucun élément n’est une cible de dépôt ».
preventDefault est obligatoire
Dans le gestionnaire dragover, vous devez appeler e.preventDefault(). Cela annule le comportement par défaut du navigateur, qui refuse le dépôt. Sans cet appel, le curseur reste sur « interdit » et l’événement drop ne se déclenche jamais, quoi que fasse l’utilisateur.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});dragenter et dragleave
dragenter est déclenché une fois lorsque le curseur entre dans la cible ; dragleave est déclenché une fois lorsqu’il en sort. Utilisez-les pour activer ou désactiver une surbrillance visuelle de « glissement au-dessus » : ajoutez une classe à l’entrée et supprimez-la à la sortie afin que l’utilisateur voie quelle zone recevra le dépôt.
dragleave est déclenché pour les éléments enfants
Un comportement subtil peut se produire : lorsque le curseur passe au-dessus d’un élément enfant, dragleave est déclenché sur le parent, puis dragenter sur l’enfant. Utilisez un compteur, incrémenté dans dragenter et décrémenté dans dragleave, et ne supprimez la surbrillance que lorsque le compteur revient à zéro.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});Définir dropEffect
Dans dragover, définissez e.dataTransfer.dropEffect = "move" (ou « copy », « link », « none ») pour contrôler le curseur et indiquer à la source ce qui va se produire. L’effet doit être compatible avec effectAllowed de la source, sinon le dépôt est refusé.
Lire les données lors de drop
Dans le gestionnaire drop, appelez e.dataTransfer.getData(format) avec le même type MIME que celui utilisé par setData (généralement « text/plain »). Localisez ensuite l’élément à l’aide de son identifiant, ajoutez-le à la cible, mettez à jour un modèle de données ou effectuez toute autre action nécessaire à l’application.
Empêcher le comportement par défaut lors de drop
Vous devez également appeler e.preventDefault() dans le gestionnaire drop. Sans cela, le navigateur revient à son comportement natif : pour une URL déposée, cela signifie naviguer vers le lien, ce qui détruit immédiatement l’état de votre page.
Déposer depuis le bureau
Le navigateur transforme les fichiers déplacés depuis l’OS en un événement drop dont e.dataTransfer.files est renseigné. Parcourez la FileList et lisez chaque fichier avec l’API des fichiers pour prendre en charge l’envoi d’images, les visionneuses de fichiers log ou l’importation de documents.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Plusieurs types dans dataTransfer
setData peut stocker la même charge utile sous plusieurs types MIME : « text/plain » comme solution de repli, « text/uri-list » pour les URL et « application/json » pour les charges utiles structurées. La cible du dépôt choisit le type le plus riche qu’elle sait comprendre grâce à getData.
Coordonner avec les événements tactiles
Les navigateurs mobiles ne génèrent pas d’événements dragover et drop à partir des interactions tactiles. Pour une expérience unifiée, utilisez les événements de pointeur avec une détection manuelle des zones sous le pointeur, ou une bibliothèque qui masque les différences. Le glisser-déposer HTML5 natif doit être considéré comme réservé aux ordinateurs de bureau.
Conseil de performance
dragover est déclenché en continu lorsque le curseur se déplace, souvent des dizaines de fois par seconde. Gardez le gestionnaire léger : évitez les requêtes coûteuses dans le DOM ou les lectures de mise en page à l’intérieur. Mettez les rectangles en cache dans dragenter et réutilisez-les tant que le curseur reste au-dessus de la cible.
Vérification des connaissances
Pourquoi l’événement drop ne se déclenche-t-il jamais sur une cible tant que vous n’appelez pas e.preventDefault() dans le gestionnaire dragover ?
Résumé
Une cible de dépôt fonctionnelle écoute dragover (empêche toujours le comportement par défaut et définit éventuellement dropEffect) ainsi que drop (empêche à nouveau le comportement par défaut, puis lit dataTransfer.getData ou dataTransfer.files). Utilisez dragenter et dragleave avec un compteur pour la surbrillance, et gardez les gestionnaires légers, car dragover est déclenché très fréquemment.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Événements `dragover` et `drop` » est-elle gratuite ?
Oui — le texte complet de « Événements `dragover` et `drop` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Événements `dragover` et `drop` » ?
Définissez les cibles de dépôt valides et gérez l’événement `drop`. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Événements `dragover` et `drop` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attribut `draggable` et événement `dragstart`
- Événements `dragover` et `drop`
- Objet `dataTransfer`
- Liste pratique réorganisable par glisser-déposer