Drag'n'Drop - Récupérer ID drop pour calculer score

**loustouclou** · 12/02/2019, 16h11

Bonjour à tous, je souhaiterai avoir votre aide concernant mon problème. Je souhaite créer un jeu de chronologie avec drag and drop. 8 images sont affichées en ligne et 8 cadres sont située sous ces images et le but est de placer les images dans le bon ordre dans ces cases.
Jusque là pas de problème seulement j'aimerai récupérer l'ID des drop et calculer le score de la personne pour créer un fichier avec le nom de la personne, son score et l'ordre qu'elle a choisit.
J'ai cherché pendant des heures mais pas moyen de trouver une réponse.
Merci à vous

Voici mon

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="utf-8" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <title> Jeu chronologie des tapuscrits - PROPRO Toussaint </title>
    </head>
 
    <body>
        <header tabindex="0">
            <h1><b>Jeu - Chronologie des tapuscrits</b></h1>
        </header>
 
			</br>Veuillez entrer votre nom
			<input type="text" name="nom"></br></br>
			<p> <b>Vous trouverez ci-dessous huit versions du paragraphe 35 de Jean-Philippe Toussaint.</br> Essayez de les remettre dans l'ordre de l'écriture de l'auteur. Bonne chance !</b> </p></br>
			<a href="file.csv"><img src="disquette.png" id="logo" alt="disquette"/></a>
 
        <div class="gallery">
             <a id="1" draggable="true" data-drop-to="drop_1" href="#" onClick="window.open('./popup1.htm', 'photo1', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00020.jpg"></a>
             <a id="2" draggable="true" data-drop-to="drop_2" href="#" onClick="window.open('./popup2.htm', 'photo2', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00029.jpg"></a>
             <a id="3" draggable="true" data-drop-to="drop_3" href="#" onClick="window.open('./popup3.htm', 'photo3', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00032.jpg"></a>
             <a id="4" draggable="true" data-drop-to="drop_4" href="#" onClick="window.open('./popup4.htm', 'photo4', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00042.jpg"></a>
             <a id="5" draggable="true" data-drop-to="drop_5" href="#" onClick="window.open('./popup5.htm', 'photo5', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00049.jpg"></a>
             <a id="6" draggable="true" data-drop-to="drop_6" href="#" onClick="window.open('./popup6.htm', 'photo6', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00052.jpg"></a>
             <a id="7" draggable="true" data-drop-to="drop_7" href="#" onClick="window.open('./popup7.htm', 'photo7', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00072.jpg"></a>
             <a id="8" draggable="true" data-drop-to="drop_8" href="#" onClick="window.open('./popup8.htm', 'photo8', 'scrollbars=yes, resizable=yes, width=1000,height=1000')"><img src="images/LRT_02_01_00074.jpg"></a>
        </div>
 
        <div style="clear:both"></div>
 
        <div class="albums">
            <div class="album" id="drop_1" droppable="true"><h2>Premier</h2></div>
            <div class="album" id="drop_2" droppable="true"><h2>Deuxième</h2></div>
            <div class="album" id="drop_3" droppable="true"><h2>Troisième</h2></div>
            <div class="album" id="drop_4" droppable="true"><h2>Quatrième</h2></div>
            <div class="album" id="drop_5" droppable="true"><h2>Cinquième</h2></div>
            <div class="album" id="drop_6" droppable="true"><h2>Sixième</h2></div>
            <div class="album" id="drop_7" droppable="true"><h2>Septième</h2></div>
            <div class="album" id="drop_8" droppable="true"><h2>Huitième</h2></div>
        </div>
 
        <input type="submit" name="valider" value="Valider" /></br></br>
 
        <script src="js/main.js"></script>
 
</body>
 
</html>

Mon

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// add event handler
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();
// inner variables
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
// preventDefault (stops the browser from redirecting off to the text)
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}
// update event handlers
function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}
// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault) event.preventDefault();
    // little customization
    this.style.borderColor = "#000";
    return false;
});
// dragleave event handler
addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault) event.preventDefault();
    // little customization
    this.style.borderColor = "#ccc";
    return false;
});
// dragenter event handler
addEvent(dropAreas, 'dragenter', cancel);
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();
    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);
    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';
    var oldThis = this;
    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM
        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';
        // and update event handlers
        updateDataTransfer();
        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);
    return false;
});

Ainsi que mon

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/* permet de décaller les images du bord */
body {
  margin: 5px;
  background-color:#DDA0DD;
  font:14px/1.3 Arial,sans-serif;
}
 
h1 {
  text-align: center;
}
 
#logo {
  position: absolute;
  top:5px;
  right:5px;
  width: 5%;
}
 
/* Page layout styles */
*{
    margin:0;
    padding:0;
}
 
/* header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    color:#fff;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
*/
 
/* Style du bouton valider */
input[type=submit] {
  border:1px solid #F5C5C5;
  border-radius:5px;
  display:block;
  margin: 40px auto;
  width:100px;
  height:100px;
  text-align-last: center;
  background-color:#000000;
  color:white;
}
/* Style de la galerie */
.gallery {
    text-align:center;
    margin: 40px auto 0;
    width: 100%;
}
 
.gallery a {
    display: inline-block;
    height: 150px;
    margin: 10px;
    opacity: 1;
    position: relative;
    width: 150px;
 
    -khtml-user-drag: element;
 
    /* Empêche l'utilisateur de séléctionner */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
 
    /* Gère transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.gallery a img {
    border: 8px solid #fff;
    /* permet de faire style un peu comme polaroid avec la bande blanche border-bottom: 20px solid #fff; */
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
 
    /* Taille */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Ombre */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
 
.albums {
    margin: 40px auto 0;
    overflow: hidden;
    width: 100%;
}
 
.album {
    border: 3px dashed #ccc;
    float: left;
    margin: 12px;
    min-height: 125px;
    padding: 10px;
    width: 125px;
 
    /* Gère transition */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}
 
/* gère l'apparence de l'image lorsqu'elle est placée dans la case chronologique */
 
.album a {
    display: inline-block;
    height: 56px;
    margin: 15px;
    opacity: 1;
    position: relative;
    width: 75px;
 
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    /* Empêche l'utilisateur de séléctionner */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.album a img {
    border: 4px solid #fff;
    /* permet de faire style un peu comme polaroid avec la bande blanche border-bottom: 20px solid #fff; */
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
 
    /* Taille */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Ombre */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
 
 
}

**NoSmoking** · 13/02/2019, 18h49

Bonjour et bienvenue sur DVP.

Il y a plusieurs maladresses dans ton code tant sur la forme comme sur le fond.

• Ta fonction addEvent pourrait être remplacer par addEventListener qui est quand même supportée depuis IE9 soit un vrai bail d'autant que l'API Drag and Drop n'est pas supportée par les antiquités

• Dans ta fonction sur le « drop » pourquoi créer un élément identique, ou presque, le déposer puis détruire « l'original », il est plus judicieux de déplacer l'élément « original » avec la méthode appendChild, de plus de la sorte tu n'as pas à réattribuer les événements liés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();
    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);
    // get its image src
/*
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';
*/
    var oldThis = this;
    setTimeout(function() {
        oldThis.appendChild( oldObj);
/*        
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM
        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';
        // and update event handlers
        updateDataTransfer();
*/                
        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);
    return false;
});

• Concernant l'utilisation de ta fonction updateDataTransfer, es tu conscient que tu rajoutes un événement à chaque « drop », cela peut finir par faire beaucoup !

• Comment gères tu le fait que tu puisses « dropper » plusieurs éléments dans le même conteneur ?

• Tu peux récupérer les éléments et leur position en les parcourant pour connaitre leur conteneur, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function getResult(){
  var oElements = document.querySelectorAll("[draggable]");
  for( i =0; i < oElements.length; i +=1){
    if(oElements[i].parentNode.id){
      console.log( "%s : %s",oElements[i].parentNode.id, oElements[i].id);
    }
  }
}

... fonction que tu peux intégrer dans ta fonction sur le « drop » simplifiée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();
    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);
    var oldThis = this;
    setTimeout(function() {
        oldThis.appendChild( oldObj);
        getResult();
        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);
    return false;
});

Sans aller plus loin je te propose de regarder cette discussion : Drag and drop méthode setData pour dataTransfert où un exemple de réalisation est même fourni, https://www.developpez.net/forums/d1.../#post10349325.

Autre discussion, récente, qui parle de cela : Drag & Drop Bug de mise à la poubelle.

**loustouclou** · 14/02/2019, 17h22

Merci pour votre réponse très complète, je n'ai jamais utilisé javascript avant et j'ai déja beaucoup de mal à comprendre mon code ^^
Je vais regarder ça !

**loustouclou** · 15/02/2019, 16h58

NoSmoking, je n'arrive pas à comprendre correctement le code je pense et du coup j'ai beau me pencher dessus et aller chercher d'autres informations je galère à avancer.
Pourrais-tu m'éclairer?