Script drag : Drag and drop
Script exemple de drag and drop d'éléments d'un bloc vers un autre (et inversement)
Partie II : L'interactivité

Edition 1 | Chapitre 12 : Manipuler le document / Page 186

Edition 2 | Chapitre 12 : Manipuler le document / Page 201

Edition 3 | Chapitre 12 : Manipuler le document / Page 201
Exécution du script
Code source
<html><head><title>Gestion du drag and drop</title><style type="text/css"> div { box-sizing: border-box; } div.dragdrop { display:inline-block; padding:3px; margin:3px; border:2px solid #333; border-radius:3px; cursor: move; background:#fff; width:110px; text-align: center; } div.onDropZone { border:8px solid #6d6 !important; padding:4px !important; }</style></head><body><script type="text/javascript">var element=null; // Variable globale de stockage de l'élément dragvar source=null; // Variable globale de stockage de la zone d'élémentsdocument.addEventListener("readystatechange", function(evt) { if (document.readyState=="interactive") { /* Parcourir tous les éléments draggable */ var drags=document.querySelectorAll("div.dragdrop"); for (var i=0; i<drags.length; i++) { var d=drags[i]; d.addEventListener("drag", function(evt) { /* Mise à jour du style de l'élément de départ */ evt.currentTarget.style.border="2px dashed #aaa"; evt.currentTarget.style.color="fff"; evt.currentTarget.style.backgroundColor="#fff"; }); d.addEventListener("dragstart", function(evt) { /* Mise à jour du style de l'élément qui suit la souris */ evt.currentTarget.style.backgroundColor="#6f6"; // Sauvegarde dans les variables globales element=evt.currentTarget; source=evt.currentTarget.parentNode; }); d.addEventListener("dragend", function(evt) { /* Retour à la normale en fin de drag and drop */ evt.currentTarget.style.border="2px solid #333"; evt.currentTarget.style.color="#000"; element=null; source=null; }); } /* Evénements dragover indispensables pour que l'event drop soit actif*/ var container=document.getElementById("container"); var origine=document.getElementById("origine"); container.addEventListener("dragover", function(evt) { event.preventDefault(); /* Pour autoriser le drop par JS */ }); origine.addEventListener("dragover", function(evt) { event.preventDefault(); }); /* Passage des activités de origine vers container */ container.addEventListener("dragenter", function(evt) { if (source!==origine) {return false;} this.className="onDropZone"; /* container passe en surbrillance */ }); container.addEventListener("dragleave", function(evt) { if (source!==origine) {return false;} console.log(evt.path); if (evt.target.className=="dragdrop") { return false;} if (evt.relatedTarget.className=="dragdrop") { return false;} this.className=""; /* La surbrillance s'efface */ }); container.addEventListener("drop", function(evt) { if (source!==origine) {return false;} this.className=""; this.appendChild(element); /* Déplacement de l'élément vers container */ element=null; source=null; }); /* Retour des activités de container vers origine */ origine.addEventListener("dragenter", function(evt) { if (source!==container) {return false;} origine.className="onDropZone"; /* Origine passe en surbrillance */ }); origine.addEventListener("dragleave", function(evt) { if (source!==container) {return false;} if (evt.target.className=="dragdrop") { return false;} if (evt.relatedTarget.className=="dragdrop") { return false;} origine.className=""; }); origine.addEventListener("drop", function(evt) { if (source!==container) {return false;} this.className=""; this.appendChild(element); /* Déplacement de l'élément vers origine */ element=null; source=null; }); } });/* Fonction qui retourne le tableau des activités retenues dans div#container */function getActivites() { var container=document.getElementById("container"); var activites=[]; var elts=container.getElementsByClassName("dragdrop"); for (var i=0; i<elts.length; i++) { activites.push(elts[i].dataset.id); } return activites;}</script> <h1>Gestion du drag and drop (glisser-déposer)</h1><p>Déplacez des activités vers la droite ou vers la gauche.</p><div id="disciplines"> <div class="discipline"> <div class="titre">Activités disponibles</div> <div id="origine"> <div class="dragdrop" draggable="true" data-id="A1">Aqua-Poney</div> <div class="dragdrop" draggable="true" data-id="P1">Piscine</div> <div class="dragdrop" draggable="true" data-id="G1">Golf</div> <div class="dragdrop" draggable="true" data-id="T1">Tennis</div> <div class="dragdrop" draggable="true" data-id="T2">Tir à l'arc</div> <div class="dragdrop" draggable="true" data-id="B1">Bière pong</div> <div class="dragdrop" draggable="true" data-id="T3">Transat</div> <div class="dragdrop" draggable="true" data-id="H1">Handball</div> <div class="dragdrop" draggable="true" data-id="F1">Football</div> <div class="dragdrop" draggable="true" data-id="P1">Pétanque</div> <div class="dragdrop" draggable="true" data-id="P2">Pêche</div> <div class="dragdrop" draggable="true" data-id="R1">Rugby</div> </div> </div> <div class="discipline"> <div class="titre">Activités choisies</div> <div id="container"> </div> </div></div><div class="bouton" onclick="console.log(getActivites())"> Lister les activités choisies</div><style type="text/css"> /* CSS de mises en forme */ div#disciplines { display:flex; flex-wrap: nowrap; justify-content:space-around; width:100%; } div.discipline { width:49%; } div.titre { text-align:center; font-weight:bold; font-size:20px; } div#origine, div#container { padding:10px; border:2px solid #000; width:100%; min-height:230px; background:#fff; } div.bouton { cursor:pointer; border:1px solid #333; border-radius:4px; display:inline-block; padding:5px; margin:10px; font-weight:bold; background-color:#ccc; color:#000; } div.bouton:hover { background-color:#000; color:#fff; }</style></body></html>
Troisième édition Tout JavaScript chez Dunod
En savoir plusSortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligne Le graph des objets JavaScript
Chargement
en cours...