Cibles de dépôt et dataTransfer
Acceptez les dépôts et transférez les données.
Cibles de dépôt et dataTransfer est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Qu’est-ce qui fait une cible de dépôt ?
Par défaut, les éléments refusent les dépôts. Pour accepter un dépôt, vous devez empêcher le comportement par défaut à la fois sur dragover et sur drop. C’est le piège le plus courant.
Autoriser le dépôt lors du survol
Le navigateur bloque le dépôt tant que vous n’appelez pas preventDefault() dans le gestionnaire de dragover. Sans cela, l’événement drop ne se déclenche jamais.
const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // REQUIRED to allow drop
});L’événement de dépôt
Lorsque l’utilisateur relâche l’élément au-dessus d’une cible valide, l’événement drop se déclenche. Empêchez également l’action par défaut ici (cela évite que le navigateur ouvre les fichiers ou les URL déposés), puis lisez les données.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
console.log("Dropped", id);
});Lire dataTransfer
getData(format) récupère ce qui a été stocké dans dragstart. La chaîne de format doit correspondre à celle qui a été définie.
const payload = e.dataTransfer.getData("text/plain");Déplacer un élément
Un usage classique consiste à ajouter le nœud dragged à la zone de dépôt en utilisant l’identifiant que vous avez transféré.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
zone.appendChild(dragged);
});Plusieurs formats de données
dataTransfer peut contenir plusieurs formats à la fois — par exemple text/plain et application/json — et la cible lit celui qu’elle comprend.
e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));Définir dropEffect
Dans dragover, définissez dropEffect sur "copy", "move" ou "link" pour contrôler le curseur et la sémantique de l’opération.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});effectAllowed et dropEffect
effectAllowed (défini par la source) indique ce qui est autorisé ; dropEffect (défini par la cible) en sélectionne une. Ils fonctionnent ensemble pour afficher le curseur approprié.
Réordonner une liste
Combinez la position du dépôt et l’insertion pour réordonner les éléments. Déterminez s’il faut insérer l’élément avant ou après celui qui se trouve sous le curseur.
list.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
list.insertBefore(dragged, e.target);
});Identifier la cible du dépôt
Utilisez e.target (l’élément situé sous le pointeur) et closest() pour trouver le conteneur concerné lorsque les cibles sont imbriquées.
zone.addEventListener("drop", (e) => {
const slot = e.target.closest(".slot");
if (slot) slot.appendChild(getDragged(e));
});Effacer les données
dataTransfer.clearData() vide les données stockées ; si vous transmettez un format, seule cette donnée est effacée. Le stockage est de toute façon réinitialisé automatiquement après le glissement.
e.dataTransfer.clearData("text/plain");Vérification rapide
Testez les cibles de dépôt.
Récapitulatif : cibles de dépôt et dataTransfer
Vous avez créé des zones de dépôt en appelant preventDefault() sur dragover et drop, lu la charge utile avec getData, déplacé et réordonné des éléments, défini dropEffect et géré des cibles imbriquées. Ensuite : le retour visuel.
Questions Fréquemment Posées
La leçon « Cibles de dépôt et dataTransfer » est-elle gratuite ?
Oui — le texte complet de « Cibles de dépôt et dataTransfer » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Cibles de dépôt et dataTransfer » ?
Acceptez les dépôts et transférez les données. Tu pratiques JavaScript 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 JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript 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 « Cibles de dépôt et dataTransfer » ?
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 JavaScript Academy ?
Oui. Chaque leçon JavaScript 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
- Rendre des éléments déplaçables
- Cibles de dépôt et dataTransfer
- Retour visuel pendant le glisser-déposer
- Glisser des fichiers dans la page