Drag and Drop un peu particulier !

Signaler
Messages postés
2
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
23 juin 2017
-
Messages postés
2
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
23 juin 2017
-
Bonjour à tous,

Dans le cadre de mon travail (enseignant en dessin industriel), je souhaite réaliser une série d'exercices basés sur le "glisser / déposer". Je mets en place actuellement un site internet sur le quel je déposerais plusieurs activités.
Mon objectif est que chacun de mes élèves s'y connecte réalise l'activité et que je récupère leur résultats...

Un des défis qui me pose problème a ce jour, est le "drag an drop". J'arrive à effectuer un premier test et valider les réponses, seulement quand j'active la deuxième série c'est le drame... quoi que l'on fasse, lorsque je valide la réponse il me met que c'est bon... J'ai l'impression qu'il garde en mémoire la réponse précédente..

Est ce que quelqu'un peut m'aider et m'apporter des éléments de réponses ou de réflexions à mener.

voici mon code :
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div21, #div22, #div23, #div24 {
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
#div3 {
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
    padding: 10px;
}
#draggable1,  #draggable2, #draggable3, #draggable4 {
    width: 150px;
    height: 150px;
    text-align: center;
    background: white;
  }
.grpexercice
{
 /*border:solid; border-color:#FFFF00;/*YELLOW*/
 display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}
#exercice
{
 /*border:solid; border-color:red;/*...*/
 display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}
.exercice02{
 /*border:solid; border-color:#FFFFFF;/*...*/
 display:none;
}
#grp01
{
 display:flex;
  justify-content:center;
  align-items:center;
}
#grp02 {
 display:none;
  justify-content:center;
  align-items:center;
}
.dropzone {
    width: 200px;
    height: 20px;
    background: white;
    margin-bottom: 10px;
    padding: 10px;
  }
#suivant {
 display:none;
 }

#testaffichage{
 
}
</style>
<script>
  var dragged;

  /* Les événements sont déclenchés sur les objets glissables */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // Stocke une référence sur l'objet glissable
      dragged = event.target;
      // transparence 50%
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset de la transparence
      event.target.style.opacity = "";
   //alert("Un Drag & Drop vient de se terminer mais l'événement dragend ne sait pas si c'est un succès ou non.");
  }, false);

  /* Les événements sont déclenchés sur les cibles du drop */
  document.addEventListener("dragover", function( event ) {
      // Empêche default d'autoriser le drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "#CCCCCC";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
      event.preventDefault();
   //alert('Vous avez bien déposé votre élément !');
      // Déplace l'élément traîné vers la cible du drop sélectionnée
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);
  

 function validationDuResultat(){
  if((document.getElementById('draggable1').parentNode.id=='div21') &&
   (document.getElementById('draggable2').parentNode.id=='div22') &&
   (document.getElementById('draggable3').parentNode.id=='div23') &&
   (document.getElementById('draggable4').parentNode.id=='div24')) {
   alert('Félicitation.');
   
   var test = document.getElementById("suivant");
    test.style.display = "flex";
  }
  else{
   alert('Faux.');
  }
 }
 
 function exercicesuivant() {

  var test2 = document.getElementById("grp02");
   test2.style.display = "flex";
   
  var test3 = document.getElementById("grp01");
   test3.style.display = "none";
 }


</script>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Déplace l'image entre les différents éléments.</p>
<div id="grp01" class="grp01">
 <div class="grpexercice">
  <div id="exercice">
   <div id="div1" class="dropzone">
     <img src="pdv01_501_dess.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable1" width="150" height="150">
   </div>
   <div id="div1" class="dropzone">
     <img src="pdv01_501_dr.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable2" width="150" height="150">
   </div>
   <div id="div1" class="dropzone">
     <img src="pdv01_501_g.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable3" width="150" height="150">
   </div>
   <div id="div1" class="dropzone">
     <img src="pdv01_501_top.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable4" width="150" height="150">
   </div>

  </div>
 </div>
 <div class="grpexercice">
  <div id="exercice">
   <div>
    <div id="div3"></div>
    <div id="div21" class="dropzone"></div>
    <div id="div3"></div>
   </div>
   <div>
    <div id="div22" class="dropzone"></div>
    <div id="div1">
      <img src="pdv01_501_f.png" width="150" height="150">
    </div>
    <div id="div23" class="dropzone"></div>
   </div>
   <div>
    <div id="div3"></div>
    <div id="div24" class="dropzone"></div>
    <div id="div3"></div>
   </div>
   <div><input type="submit" value="Je valide" onclick="validationDuResultat()"/></div>
  </div>
 </div>
 <div id="suivant"><input type="submit" value="Suivant" onclick="exercicesuivant()"/></div>
</div>
<div id="grp02" class="grp02">
 <div class="grpexercice">
  <div id="exercice">
   <div id="div1" class="dropzone">
     <img src="pdv01_601_dess.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable1" width="150" height="150">
   </div>
   <div id="div1" class="dropzone">
     <img src="pdv01_601_dr.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable2" width="150" height="150">
   </div>
   <div id="div1" class="dropzone">
     <img src="pdv01_601_g.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable3" width="150" height="150">
   </div>
   <div id="div1" class="dropzone">
     <img src="pdv01_601_top.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" id="draggable4" width="150" height="150">
   </div>
  </div>
 </div>
 <div class="grpexercice">
  <div id="exercice">
   <div>
    <div id="div3"></div>
    <div id="div21" class="dropzone"></div>
    <div id="div3"></div>
   </div>
   <div>
    <div id="div22" class="dropzone"></div>
    <div id="div1">
      <img src="pdv01_601_f.png" width="150" height="150">
    </div>
    <div id="div23" class="dropzone"></div>
   </div>
   <div>
    <div id="div3"></div>
    <div id="div24" class="dropzone"></div>
    <div id="div3"></div>
   </div>
   <div><input type="submit" value="Je valide" onclick="validationDuResultat()"/></div>
  </div>
 </div>
 <div id="suivant" ><input type="submit" value="Suivant" onclick="exercicesuivant()"/></div>
</div>
</body>
</html>

1 réponse

Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
128
bonjour

essai en remplacant target par currentTarget

dragged = event.currentTarget;


et sur la ligne suivante pas besoin de faire removeChild
appendChild sert positionner déplacer l'element selectionné a l'emplacement spécifié

event.target.appendChild( dragged );

Messages postés
2
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
23 juin 2017

Bonjour,

Merci de t'investir dans ce sujet, car je lutte....

En ce qui concerne ta première remarque, dès que j'ai remplacé par "dragged = event.currentTarget;", le déplacement d'image n'a plus fonctionné. L'image ne voulait plus rester dans la fenêtre de drop.