Comment Faire Plusieur Drag And Drop Avec Une Seule Fonction
Salut l'ami(e) codeur(se) ! Prêt(e) pour un petit caféine-code ? Aujourd'hui, on s'attaque à un truc qui peut vite devenir un casse-tête : le drag and drop. Plus précisément, comment gérer *plusieurs* zones de dépôt avec *une seule* fonction. Oui, oui, une seule ! Fini le copier-coller frénétique de code. Alléluia !
Au début, quand on bidouille un drag and drop, c'est facile, non ? Une source, une cible, quelques lignes de JavaScript et hop, ça marche ! Mais quand on veut 5, 10, 20 zones de dépôt… 😱 On panique un peu, avouons-le. On se voit déjà noyé(e) sous des fonctions *identiques* qui ne diffèrent que par le nom de l'élément ciblé. Beurk !
Alors, comment faire pour éviter ce cauchemar ? La réponse, elle est élégante et (presque) magique : les attributs data-*. Oui, ces petits bijoux qu'on peut coller partout dans notre HTML ! Ils vont nous sauver la vie. Littéralement. Enfin, peut-être pas littéralement, mais tu vois l'idée.
L'idée, c'est d'utiliser un attribut data-* pour identifier chaque zone de dépôt. Par exemple, data-zone="zone1", data-zone="zone2", etc. Tu piges le truc ? Chaque zone a son petit nom. On pourrait l'appeler Jean-Michel si on voulait, mais "zone1" c'est plus clair, non ?
Ensuite, dans notre fonction drop (celle qui gère la réception de l'élément déplacé), on va récupérer la valeur de cet attribut data-zone. Comme ça, on sait *exactement* où l'élément a été déposé. Et on peut agir en conséquence !
Imagine :
function handleDrop(event) {
event.preventDefault();
const zone = event.target.dataset.zone;
const data = event.dataTransfer.getData("text"); // Récupère les données glissées
console.log("Élément déposé dans la zone : ", zone);
// Et là, on fait ce qu'on veut en fonction de 'zone' !
}
Simple, non ? *Presque* trop simple, on se demande presque si c'est légal. Mais si, c'est légal ! Et c'est super puissant. On peut utiliser des switch, des if/else, des objets… Bref, on a le contrôle !
L'astuce en plus : pense à vérifier que l'élément sur lequel tu appliques event.target possède bien l'attribut data-zone. Sinon, tu risques de te retrouver avec des erreurs JavaScript pas très sympas. Un petit if (event.target.dataset.zone) ne mange pas de pain.
Et voilà ! Avec ça, tu peux gérer autant de zones de drag and drop que tu veux avec une seule fonction. Magique, non ? Bon, ok, c'est pas de la magie noire, mais c'est quand même vachement pratique. Alors, prêt(e) à simplifier ton code et à impressionner tes collègues ? À toi de jouer !
N'hésite pas à expérimenter, à casser des choses (c'est comme ça qu'on apprend !) et surtout, amuse-toi ! Et si tu bloques, reviens me voir avec ton café, on trouvera une solution ensemble. À la prochaine !
