Retourner à la page d'accueil de TJS

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é / Chapitre 12 : Manipuler le document / Page 186

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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 18/07/2019 15:53:15 sur php7 en 79.32 ms