Retour visuel pendant le glisser-déposer
Appliquez un style aux éléments pendant les opérations de glisser-déposer.
Retour visuel pendant le glisser-déposer est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Pourquoi le retour visuel est important
Un bon glisser-déposer indique à l’utilisateur ce qui se passe : quel élément se déplace, où il peut être déposé et si le dépôt est valide. Sans retour visuel, l’interaction semble défaillante.
Mettre en forme l’élément dragged
Rendez la source plus transparente ou réduisez-la avec une mise à l’échelle lors de dragstart, afin que l’utilisateur voie ce qu’il a sélectionné.
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));L’événement d’entrée du glissement
dragenter se déclenche lorsque l’élément dragged entre dans une cible potentielle. Utilisez-le pour mettre la zone en évidence.
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});L’événement de sortie du glissement
dragleave se déclenche lorsque l’élément quitte la cible. Supprimez la mise en évidence à ce moment-là.
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});Le problème du scintillement
dragenter/dragleave se déclenchent également pour les éléments enfants, ce qui provoque un scintillement. Un compteur ou une vérification de relatedTarget permet de stabiliser la mise en évidence.
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });Réinitialiser lors du dépôt
Effacez toujours l’état de mise en évidence dans le gestionnaire de drop, car dragleave peut ne pas se déclencher lorsqu’un dépôt réussit.
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});Personnaliser l’image de glissement
setDragImage(element, offsetX, offsetY) dans dragstart remplace l’image fantôme par n’importe quel élément.
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});Le curseur avec dropEffect
Le curseur (signe plus pour la copie, flèche pour le déplacement, symbole de dépôt interdit) est contrôlé par dropEffect, défini sur dragover. Refusez les dépôts non valides avec "none".
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});Afficher un espace réservé pour le dépôt
Dans les listes triables, insérez un élément d’espace réservé à la position de dépôt prévue afin que les utilisateurs voient exactement où l’élément sera placé.
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}Calculer la position d’insertion
Comparez la coordonnée Y du pointeur au milieu vertical de chaque élément pour décider s’il faut le déposer avant ou après celui-ci.
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}Retour accessible
Les indications visuelles seules excluent les utilisateurs du clavier et des lecteurs d’écran. Associez le glisser-déposer à des annonces dynamiques ARIA et à une alternative au clavier pour garantir l’accessibilité.
Vérification rapide
Testez le retour visuel.
Récapitulatif : retour visuel
Vous avez mis en forme l’élément dragged, mis les zones en évidence avec dragenter/dragleave, résolu le scintillement avec un compteur de profondeur, personnalisé l’image de glissement, contrôlé le curseur avec dropEffect et affiché des espaces réservés pour le dépôt. Ensuite : le glissement de fichiers.
Questions Fréquemment Posées
La leçon « Retour visuel pendant le glisser-déposer » est-elle gratuite ?
Oui — le texte complet de « Retour visuel pendant le glisser-déposer » 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 « Retour visuel pendant le glisser-déposer » ?
Appliquez un style aux éléments pendant les opérations de glisser-déposer. 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 3 sur 4.
Combien de temps prend la leçon « Retour visuel pendant le glisser-déposer » ?
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