drag and drop : adaptation code d'une fonction

**atreides51** · 11/12/2020, 13h26

Bonjour à tous,
j'ai suivi (avec bcp de mal, je suis vraiment trop mauvais en javascript) le post sur le drag and drop de NoSmocking et je rencontre un soucis de modification.
https://www.developpez.net/forums/d1.../#post10349325
dans l'exemple de nosmocking, lorsqu'il droppe un nom , il ne disparaît pas de la liste de noms et c'est en fait ce que je recherche à faire mais aussi qu'il ne puisse être que dans un groupe et non dans plusieurs à la fois.
autre petite requete (lol)
j'aimerai faire passer une autre variable (voir plusieurs) avec le nom mais sans qu'elle apparaisse dans la liste de noms mais que je puisse la récupérer dans le résultat, j'arrive à la faire passer et ensuite faire un explode
mais c'est pas beau.
je remets le fichier en question
un grand merci pour votre aide

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
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and drop</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1859989">
<style>
html, body {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0
}
section {
  display: block;
  margin: 0 .5em;
}
section p,
section pre {
  margin: 1em;
}
pre {
  font: inherit;
  border: 1px solid #ABC;
  padding: .5em;
  font-size: .8em;
}
code {
  white-space: pre-wrap;
}
.drag-over {
  background: #EEF;
}
.zone-groupe {
  display: flex;
  flex-wrap: wrap;
}
.zone-groupe > div {
  flex: 0 0 33.33%;
}
li {
  position: relative;
  display: block;
  margin: .25em;
  padding: .5em;
  border-radius: .25em;
  border: 1px dotted #999;
  list-style: none;
  background: #EEE;
}
button {
  font: inherit;
  padding: .25em 1em;
  cursor: pointer;
}
*[draggable=true] {
  cursor: move;
  -moz-user-select: none;
  -khtml-user-drag: element;
}
li[draggable=true]:hover {
  border-color: #333;
  background: #CDE;
}
.drop-zone {
  margin: 1em;
  padding: 0;
  min-height: 15em;
  min-width: 15em;
  border: 1px solid #ABC;
  font-size: .8em;
}
.liste-origine {
  display: flex;
  flex-wrap: wrap;
  min-height: auto;
}
.liste-origine li {
  width: 10em;
  margin: .25em;
  min-width: auto;
}
.btn-close {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  margin: .125em;
  padding: .125em;
  border: 2px solid currentColor;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 1em;
  color: #BBB;
  transform: rotate(-45deg);
  cursor: pointer;
}
.btn-close:hover {
  color: #FFF;
  background: #F00;
}
.liste-origine .btn-close {
  display: none;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Drag and drop</h1>
  </header>
  <section>
    <h2>Liste noms</h2>
    <ul id="liste" class="drop-zone liste-origine">
      <li>Sébastien</li>
      <li>Yves</li>
      <li>Vincent</li>
      <li>Julien</li>
      <li>Louis</li>
      <li>Raphaël</li>
      <li>Sylvain</li>
      <li>Michel</li>
      <li>Patrick</li>
      <li>François</li>
      <li>Alain</li>
      <li>Roland</li>
      <li>Bernard</li>
      <li>Jean-Louis</li>
      <li>Marc</li>
    </ul>
 
    <div class="zone-groupe">
      <div>
        <h2>Groupe 1</h2>
        <ul class="drop-zone">
          <li>Sébastien</li>
          <li>Vincent</li>
          <li>Louis</li>
        </ul>
      </div>
      <div>
        <h2>Groupe 2</h2>
        <ul class="drop-zone">
          <li>Michel</li>
          <li>Patrick</li>
          <li>François</li>
        </ul>
      </div>
      <div>
        <h2>Groupe 3</h2>
        <ul class="drop-zone">
          <li>Sébastien</li>
          <li>Michel</li>
          <li>Bernard</li>
          <li>Marc</li>
        </ul>
      </div>
      <div>
        <h2>Groupe 4</h2>
        <ul class="drop-zone">
          <li>Alain</li>
        </ul>
      </div>
      <div>
        <h2>Groupe 5</h2>
        <ul class="drop-zone">
        </ul>
      </div>
      <div>
        <h2>Groupe 6</h2>
        <ul class="drop-zone">
        </ul>
      </div>
    </div>
  </section>
 
  <section>
    <h2>Résultat</h2>
    <pre id="resultat"></pre>
  </section>
</main>
<script>
"use strict";
function getGroupes() {
  var prefixe = "groupe";
  var result = {};
  var oElems = document.querySelectorAll(".zone-groupe ul");
  var i;
 
  var oElem;
  var j;
  var tab;
 
  for (i = 0; oElems[i]; i += 1) {
    tab = [];
    oElem = oElems[i].children;
 
    for (j = 0; oElem[j]; j += 1) {
      tab.push(oElem[j].dataset.num);
    }
    result[prefixe + (i + 1)] = tab;
  }
  return result;
}
 
function showGroupes() {
  var data = getGroupes();
  var oDest = document.querySelector("#resultat");
  if (oDest) {
    oDest.textContent = "var data = " + JSON.stringify(data, null, "\t");
  }
}
 
function removeParent(elem) {
  var oParent = elem.parentNode;
  oParent.parentNode.removeChild(oParent);
  showGroupes();
}
 
//var typeData = "text/plain";  // normalement
var typeData = "Text"; // Text pour IE
function handleDragStart(e) {
  var idTemp = "drag-en-cours";
  this.id = idTemp;
  e.dataTransfer.setData(typeData, idTemp);
  e.dataTransfer.effectAllowed = "copy";
}
 
function handleDragEnter(e) {
  this.classList.add("drag-over");
  return false;
}
 
function handleDragOver(e) {
  e.preventDefault();
  this.classList.add("drag-over");
  e.dataTransfer.dropEffect = "copy";
  return false;
}
 
function handleDragLeave(e) {
  this.classList.remove("drag-over");
  return false;
}
 
function existeDeja(dest, num) {
  var i;
  var nb = dest.children.length;
  for (i = 0; i < nb; i += 1) {
    if (num === dest.children[i].dataset.num) {
      return true;
    }
  }
  return false;
}
 
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
  var oDest = this;
  var elem = document.getElementById(e.dataTransfer.getData(typeData)); // Text pour IE
  elem.id = "";
 
  // on ne repose pas dans le même conteneur
  if (elem.parentNode !== oDest) {
    // si retour à liste d'origine
    var retour = oDest.classList.contains("liste-origine");
    if (retour) {
      elem.parentNode.removeChild(elem);
    }
    else {
      var existe = existeDeja(oDest, elem.dataset.num);
      if (!existe) {
        // clonage élément
        var clone = elem.cloneNode(true);
        //  ajout événement car les événements ne sont pas clonés
        clone.addEventListener("dragstart", handleDragStart, false);
        oDest.appendChild(clone);
      }
    }
  }
  oDest.classList.remove("drag-over");
  showGroupes();
  return false;
}
 
// initialisation des <li> drag-droppables
var htmlBtn = "<span class='btn-close' title='Supprimer' onclick='removeParent(this)'>x</span>";
var oElems = document.querySelectorAll(".drop-zone li");
var i;
var nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  // autorise le drag
  oElems[i].setAttribute("draggable", "true");
  // ajout événement pour drag
  oElems[i].addEventListener("dragstart", handleDragStart, false);
  // ajout d'un marqueur
  oElems[i].dataset.num = oElems[i].textContent;
  // méthode « bourrin » d'ajout d'un bouton de suppression
  oElems[i].insertAdjacentHTML("beforeend", htmlBtn);
}
 
// initialisation des zones de drop
oElems = document.querySelectorAll(".drop-zone");
nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  oElems[i].addEventListener("dragenter", handleDragEnter, false);
  oElems[i].addEventListener("dragover", handleDragOver, false);
  oElems[i].addEventListener("dragleave", handleDragLeave, false);
  oElems[i].addEventListener("drop", handleDrop, false);
}
showGroupes();
</script>
</body>
</html>

**NoSmoking** · 11/12/2020, 14h21

Bonjour,
ligne 290 remplace

Code :

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

oDest.appendChild(clone);

par

Code :

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

oDest.appendChild(elem);

et supprime le code inutile..

**atreides51** · 11/12/2020, 16h31

et supprime le code inutile..

Merci Nosmocking pour cette réponse rapide

par contre du coup il ne m'est plus possible de le remettre dans la liste de nom...en cas d'erreur ...
le code inutile? tout ce qu'il y a dans la condition ? (je suis trop mauvais)

**NoSmoking** · 11/12/2020, 18h20

Dans ce cas la fonction devient des plus légère, j'ai mis en commentaire (//**) ce qui ne sert plus

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
27
28
29
30
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
  var oDest = this;
  var elem = document.getElementById(e.dataTransfer.getData(typeData)); // Text pour IE
  elem.id = "";
 
  // on ne repose pas dans le même conteneur
  if (elem.parentNode !== oDest) {
//**    // si retour à liste d'origine
//**    var retour = oDest.classList.contains("liste-origine");
//**    if (retour) {
//**      elem.parentNode.removeChild(elem);
//**    }
//**    else {
//**      var existe = existeDeja(oDest, elem.dataset.num);
//**      if (!existe) {
//**        // clonage élément
//**        var clone = elem.cloneNode(true);
//**        //  ajout événement car les événements ne sont pas clonés
//**        clone.addEventListener("dragstart", handleDragStart, false);
//**        oDest.appendChild(clone);
        oDest.appendChild(elem);
//**      }
  }
  oDest.classList.remove("drag-over");
  showGroupes();
}

autant dire qu'il ne reste que la substantifique moelle

Il te faut également modifier le code un peu plus loin pour ne pas pouvoir supprimer les éléments, marquage idem ci-dessus :

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
// initialisation des <li> drag-droppables
//**var htmlBtn = "<span class='btn-close' title='Supprimer' onclick='removeParent(this)'>x</span>";
var oElems = document.querySelectorAll(".drop-zone li");
var i;
var nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  // autorise le drag
  oElems[i].setAttribute("draggable", "true");
  // ajout événement pour drag
  oElems[i].addEventListener("dragstart", handleDragStart, false);
  // ajout d'un marqueur
  oElems[i].dataset.num = oElems[i].textContent;
  // méthode « bourrin » d'ajout d'un bouton de suppression
//**  oElems[i].insertAdjacentHTML("beforeend", htmlBtn);
}

**atreides51** · 11/12/2020, 18h40

trop bien !

MERCI Nosmocking, exactement ce que je cherchais, je vois bien la maîtrise que tu as de javascript ,pas comme moi

si j'osais te demander un dernier service;
j'aimerai passer d'autres valeurs sans pour autant qu'on les voyent dans le <li></li>
je sais pas faire ca et en fait et j'en ai besoin pour ensuite les convertir pour les insérer dans ma BDD.

merci encore (je sais ce qu'il me reste à faire ce week

)

EDIT : le résultat affiche

Code :

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

1
2
3
4
5
6
7
8
9
var data = {
	"groupe1": [
		"Vincent",
		"Yves"
	],
	"groupe2": [
		"Sébastien",
		"Julien"
	],

comment fait on pour récupérer groupe X et les noms de chaque groupe de javascript à php??

**NoSmoking** · 13/12/2020, 17h05

comment fait on pour récupérer groupe X et les noms de chaque groupe de javascript à php??

tu peux transmettre les résultats de ta sélection en utilisant la technique Ajax.

Exemple de fonction d'envoi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function sendData() {
  const URL = "fichier-de-traitement-json.php";
  const datas = "groupes=" + JSON.stringify(getGroupes());
  const oXhr = new XMLHttpRequest();
  oXhr.open("POST", URL, true);
  oXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
  oXhr.onload = function() {
    // affichage du résultat du retour si besoin
    document.getElementById("liste-retour").innerHTML = this.responseText;
  }
  oXhr.send(datas);
}

et côté serveur, avec PHP, tu peux récupérer les données comme suit :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
if (!empty( $_POST["groupes"])) {
  $datas  = json_decode($_POST["groupes"], true);
  // juste pour voir ce qui est reçu
  echo "<pre>";
  print_r($datas);
  echo "</pre>";
}
else {
  echo "ERREUR : sur lecture des datas !";
}
?>

**atreides51** · 13/12/2020, 19h48

Merci nosmoking de prendre du temps pour moi mais ca me décourage de ne pouvoir comprendre comment tout cela fonctionne...
j'ai pourtant bien mis la fonction dans la balise script et le code php en haut pour test mais il ne me renvoi rien..

où ai je fais (encore) une erreur ?

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
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and drop</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1859989">
<style>
html, body {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0
}
section {
  display: block;
  margin: 0 .5em;
}
section p,
section pre {
  margin: 1em;
}
pre {
  font: inherit;
  border: 1px solid #ABC;
  padding: .5em;
  font-size: .8em;
}
code {
  white-space: pre-wrap;
}
.drag-over {
  background: #EEF;
}
.zone-groupe {
  display: flex;
  flex-wrap: wrap;
}
.zone-groupe > div {
  flex: 0 0 33.33%;
}
li {
  position: relative;
  display: block;
  margin: .25em;
  padding: .5em;
  border-radius: .25em;
  border: 1px dotted #999;
  list-style: none;
  background: #EEE;
}
button {
  font: inherit;
  padding: .25em 1em;
  cursor: pointer;
}
*[draggable=true] {
  cursor: move;
  -moz-user-select: none;
  -khtml-user-drag: element;
}
li[draggable=true]:hover {
  border-color: #333;
  background: #CDE;
}
.drop-zone {
  margin: 1em;
  padding: 0;
  min-height: 15em;
  min-width: 15em;
  border: 1px solid #ABC;
  font-size: .8em;
}
.liste-origine {
  display: flex;
  flex-wrap: wrap;
  min-height: auto;
}
.liste-origine li {
  width: 10em;
  margin: .25em;
  min-width: auto;
}
.btn-close {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  margin: .125em;
  padding: .125em;
  border: 2px solid currentColor;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 1em;
  color: #BBB;
  transform: rotate(-45deg);
  cursor: pointer;
}
.btn-close:hover {
  color: #FFF;
  background: #F00;
}
.liste-origine .btn-close {
  display: none;
}
</style>
</head>
<body>
<?php 
if (!empty( $_POST["groupes"])) {
  $datas  = json_decode($_POST["groupes"], true);
  // juste pour voir ce qui est reçu
  echo '<pre>';
  print_r($datas);
  echo '</pre>';
}
else {
  echo "ERREUR : sur lecture des datas !";
}
?>
<form method="post" action="test.php"><main>
  <header>
    <h1>Drag and drop</h1>
  </header>
  <section>
    <h2>Liste noms</h2>
    <ul id="liste" class="drop-zone liste-origine">
      <li>Sébastien</li>
      <li>Yves</li>
      <li>Vincent</li>
      <li>Julien</li>
      <li>Louis</li>
 
    </ul>
 
    <div class="zone-groupe">
      <div >
        <h2>Groupe 1</h2>
        <ul class="drop-zone">
        </ul>
      </div>
      <div>
        <h2>Groupe 2</h2>
        <ul class="drop-zone">
        </ul>
      </div>
    </div>
  </section>
 
  <section>
    <h2>Résultat</h2>
 
                <pre id="resultat"></pre>
 
				<input name="creation" type="submit" value="go" />
 
  </section>
</main></form>
<script>
"use strict";
function getGroupes() {
  var prefixe = "groupe";
  var result = {};
  var oElems = document.querySelectorAll(".zone-groupe ul");
  var i;
 
  var oElem;
  var j;
  var tab;
 
  for (i = 0; oElems[i]; i += 1) {
    tab = [];
    oElem = oElems[i].children;
 
    for (j = 0; oElem[j]; j += 1) {
      tab.push(oElem[j].dataset.num);
    }
    result[prefixe + (i + 1)] = tab;
  }
  return result;
}
 
function showGroupes() {
  var data = getGroupes();
  var oDest = document.querySelector("#resultat");
  if (oDest) {
    oDest.textContent = "var data = " + JSON.stringify(data, null, "\t");
  }
}
 
function sendData() {
  const URL = "test.php";
  const datas = "groupes=" + JSON.stringify(getGroupes());
  const oXhr = new XMLHttpRequest();
  oXhr.open("POST", URL, true);
  oXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
  oXhr.onload = function() {
    // affichage du résultat du retour si besoin
    document.getElementById("liste-retour").innerHTML = this.responseText;
  }
  oXhr.send(datas);
}
 
function removeParent(elem) {
  var oParent = elem.parentNode;
  oParent.parentNode.removeChild(oParent);
  showGroupes();
}
 
//var typeData = "text/plain";  // normalement
var typeData = "Text"; // Text pour IE
function handleDragStart(e) {
  var idTemp = "drag-en-cours";
  this.id = idTemp;
  e.dataTransfer.setData(typeData, idTemp);
  e.dataTransfer.effectAllowed = "copy";
}
 
function handleDragEnter(e) {
  this.classList.add("drag-over");
  return false;
}
 
function handleDragOver(e) {
  e.preventDefault();
  this.classList.add("drag-over");
  e.dataTransfer.dropEffect = "copy";
  return false;
}
 
function handleDragLeave(e) {
  this.classList.remove("drag-over");
  return false;
}
 
function existeDeja(dest, num) {
  var i;
  var nb = dest.children.length;
  for (i = 0; i < nb; i += 1) {
    if (num === dest.children[i].dataset.num) {
      return true;
    }
  }
  return false;
}
 
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
  var oDest = this;
  var elem = document.getElementById(e.dataTransfer.getData(typeData)); // Text pour IE
  elem.id = "";
 
  // on ne repose pas dans le même conteneur
  if (elem.parentNode !== oDest) {
//**    // si retour à liste d'origine
//**    var retour = oDest.classList.contains("liste-origine");
//**    if (retour) {
//**      elem.parentNode.removeChild(elem);
//**    }
//**    else {
//**      var existe = existeDeja(oDest, elem.dataset.num);
//**      if (!existe) {
//**        // clonage élément
//**        var clone = elem.cloneNode(true);
//**        //  ajout événement car les événements ne sont pas clonés
//**        clone.addEventListener("dragstart", handleDragStart, false);
//**        oDest.appendChild(clone);
        oDest.appendChild(elem);
//**      }
  }
  oDest.classList.remove("drag-over");
  showGroupes();
}
//autant dire qu'il ne reste que la sub
 
// initialisation des <li> drag-droppables
//**var htmlBtn = "<span class='btn-close' title='Supprimer' onclick='removeParent(this)'>x</span>";
var oElems = document.querySelectorAll(".drop-zone li");
var i;
var nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  // autorise le drag
  oElems[i].setAttribute("draggable", "true");
  // ajout événement pour drag
  oElems[i].addEventListener("dragstart", handleDragStart, false);
  // ajout d'un marqueur
  oElems[i].dataset.num = oElems[i].textContent;
  // méthode « bourrin » d'ajout d'un bouton de suppression
//**  oElems[i].insertAdjacentHTML("beforeend", htmlBtn);
}
 
// initialisation des zones de drop
oElems = document.querySelectorAll(".drop-zone");
nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  oElems[i].addEventListener("dragenter", handleDragEnter, false);
  oElems[i].addEventListener("dragover", handleDragOver, false);
  oElems[i].addEventListener("dragleave", handleDragLeave, false);
  oElems[i].addEventListener("drop", handleDrop, false);
}
showGroupes();
</script>
</body>
</html>

**NoSmoking** · 15/12/2020, 09h36

Je pense effectivement que tu appréhendes mal ce qu'est Ajax.
En gros et en simplifié, un fichier côté client interroge un fichier côte serveur qui retourne, ou non, une réponse et celle-ci est utilisée côté client.

Je pense que tu devrais lire : Comprendre les mécanismes d'AJAX, il n'y a rien de bien compliqué

**atreides51** · 27/12/2020, 13h46

Merci Nosmoking

, après beaucoup d'heures de compréhension j'arrive enfin à récupérer mes informations via la class liste-retour (enfin.. je désespérais) j'ai donc rajouter :

Code html :

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

1
2
<button onClick="sendData()">executer la requête</button>
<div id="liste-retour"></div>

le problème que je rencontre c'est pour le groupe:
dans ton exemple, le préfixe "groupe" s'incrémente car il est en dur, mais dans mon cas je vais chercher dans ma BDD, le nom et l'ID de chaque groupe.
avec une boucle SQL j'affiche les noms de mes groupes dans la class zone-groupe mais je sais pas comment aborder le problème pour le récupérer dans mon fichier "fichier-de-traitement-json.php"
je sens que cela se passe dans la fonction getGroupes() mais une fois de plus je tourne en rond...

**NoSmoking** · 30/12/2020, 10h36

le problème que je rencontre c'est pour le groupe:
dans ton exemple, le préfixe "groupe" s'incrémente car il est en dur

à toi de générer dynamiquement les ID pour obtenir par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div>
  <h2>NAME_GROUP_1</h2>
  <ul data-ref="ID_GROUP_1" class="drop-zone">
  </ul>
</div>
<div>
  <h2>NAME_GROUP_2</h2>
  <ul data-ref="ID_GROUP_2" class="drop-zone">
  </ul>
</div>

j'ai mis l'ID dans un data-ref mais cela pourrait être dans un autre attribut.

Ensuite il te suffit de modifier la fonction getGroupes pour l'adapter à cette nouvelle configuration, par exemple :

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
function getGroupes() {
  var result = {};
  var oElems = document.querySelectorAll(".zone-groupe ul");
  var i;
  var oElem;
  var j;
  var tab;
  var ref;
 
  for (i = 0; oElems[i]; i += 1) {
    // récup. ID du groupe
    ref = oElems[i].dataset.ref;
    tab = [];
    oElem = oElems[i].children;
    for (j = 0; oElem[j]; j += 1) {
      tab.push(oElem[j].dataset.num);
    }
    result[ref] = tab;
  }
  return result;
}

Le reste ne devrait pas changer, à toi de récupérer les ID_GROUP côté serveur.

Nota quand même, il est important, avant de continuer, que tu saches précisément ce que tu vas/veux manipuler comme données et comment tu vas les associer/lier.

**atreides51** · 30/12/2020, 13h49

trop fort nosmoking ! un Grand merci parce qu’à chaque fois que tu m'aides cela me permet d'en apprendre davantage !
je te cache pas que l'histoire d'ajax m'a pris une semaine avant de trouver !!(quand je te dis que je suis un noob en java...mais maintenant j'ai compris ce qu'est Ajax (en gros lol))

Envoyé par NoSmoking

quand même, il est important, avant de continuer, que tu saches précisément ce que tu vas/veux manipuler comme données et comment tu vas les associer/lier.

c'est vrai ce que tu dis..

un bon réveillon à toi et tes proches !
florian