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;
 
 
}