Drag and Drop un peu particulier !

moiCfranck 2 Messages postés mercredi 21 juin 2017Date d'inscription 23 juin 2017 Dernière intervention - 21 juin 2017 à 15:11 - Dernière réponse : moiCfranck 2 Messages postés mercredi 21 juin 2017Date d'inscription 23 juin 2017 Dernière intervention
- 23 juin 2017 à 15:17
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>
Afficher la suite 

2 réponses

Répondre au sujet
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 22 juin 2017 à 12:53
0
Utile
1
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 );

moiCfranck 2 Messages postés mercredi 21 juin 2017Date d'inscription 23 juin 2017 Dernière intervention - 23 juin 2017 à 15:17
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.
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.