Sujet Précédent Sujet Suivant

Drag and Drop un peu particulier !

moiCfranck Messages postés 2 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 23 juin 2017 - Modifié le 22 juin 2017 à 12:39
moiCfranck Messages postés 2 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 23 juin 2017 - 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>

A voir également:

Drag and Drop un peu particulier !
Drag and drop java ✓ - Forum Java
Drag and drop - Forum Java
Drag and drop c# - Forum C# / .NET
Click and drop - Forum C# / .NET
Drop application ✓ - Forum Visual Basic 6

1 réponse

Réponse 1 / 1

@karamel Messages postés 1823 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 20 mars 2023 145
22 juin 2017 à 12:53

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 Messages postés 2 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 23 juin 2017
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.

Votre réponse