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

<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 drag
var source=null; // Variable globale de stockage de la zone d'éléments
document.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 globaleselement=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>

Exécution du script

Emulation de la console

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 plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...