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>

1 réponse

Réponse 1 / 1
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
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 );
0
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.
0

Discussions similaires

Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag Drop de fichiers
Popolino69 -
Frederyck -

3 réponses
Drag and drop en VBA
ankhn -
ucfoutu -

1 réponse
[javafx] drag and drop treeview
cs_quicest -
CptPingu -

9 réponses
drag and drop d'une image d'une page web lancée depuis un webbroswer
chrisledeveloppeur -
chrisledeveloppeur -

6 réponses
Rejoignez-nous