Drag and drop méthode setData pour dataTransfert

Version imprimable

Bonsoir,

J'avance pas à pas dans le drag and drop et je n'arrive pas à sauvegarder dans dataTransfert l'objet à déplacer.

Voici les scripts JS et le html.

Je souhaite déplacer le nom et prénom d'une liste d'individus.

Ces éléments sont déplaçables, mais restent indéfinis dans le dataTransfert.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
 
function allowDrop(ev) {
    ev.preventDefault();
}
 
function drag(ev) {
    ev.dataTransfer.setData("text/plain", ev.target.nom);
    event.dataTransfer.effectAllowed = "copy";
}
 
</script>

le html

Code:

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
//Appel de ma base de données<br>$reponse = $bdd->query('SELECT * FROM CIF ORDER BY nom');
        ?>
        <div id = "liste1" draggable="true" style="background-color:#00FFFF;font-size: 10px;height: 550px;" />
            <?php
                WHILE ($donnees = $reponse->fetch())
                {  
                    ?>
                    <div >
                            <div id = "nom" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" >
                                <?php echo $donnees['nom']." ".$donnees['prenom'];?>
                            </div>
                            <script>
                            var transfert = "<?php echo $donnees['nom'];?>";
                            var dragImg = new Image();
                            dragImg.src = 'curseur.jpg';
                            document.querySelector('*[draggable="true"]').addEventListener('dragstart', function(e) {
                            e.dataTransfer.setDragImage(dragImg, 30, 30);
                            });
                            </script>
                    </div>
                    <?php               
                }
                ?>
        </div> <br><br>
 
<div id = "groupe1"> // zone de drop
            <?php
            $reponse = $bdd->query('SELECT nomgroupe1 FROM groupes ORDER BY nomgroupe1');
            WHILE ($donnees = $reponse->fetch())
            {
                if ($donnees['nomgroupe1']!= ""){
                    echo $donnees['nomgroupe1'];echo'<br>';
                }
            }  
            ?>
            <script>
            document.querySelector('#groupe1').addEventListener('dragover', function(e) {
            e.preventDefault(); // Annule l'interdiction de drop
            });
            document.querySelector('#groupe1').addEventListener('drop', function(e) {
            e.preventDefault(); // Cette méthode est toujours nécessaire pour éviter une éventuelle redirection inattendue
            alert('élément déposé !');
            dropper.style.borderStyle = 'solid';
            });
            var dropper = document.querySelector('#groupe1');
            dropper.addEventListener('dragenter', function() {
            dropper.style.borderStyle = 'dashed';
            });
            dropper.addEventListener('dragleave', function() {
             dropper.style.borderStyle = 'solid';
            }); // Cet événement détecte n'importe quel drag & drop qui se termine, autant le mettre sur « document » :
         
            dropper.addEventListener('drop', function(e) {
            alert(e.dataTransfer.getData('text/plain')); // Affiche le contenu du type MIME « text/plain »
            });
            </script>
        </div>

Quelqu'un peut-il m'indiquer comment mettre la valeur dans le dataTransfert s'il vous plait ?

D'avance MERCI.

04/06/2018, 16h36
NoSmoking
Bonjour,
merci de mettre le code HTML généré, CTRL + U, que l'on puisse éventuellement tester.

On met les données avec event.dataTransfer.setData('Text', ???) et on les lit avec event.dataTransfer.getData('Text'), par exemple.

Si l'on regarde ta fonction
Code:

1 2 3 4 function drag(ev) { ev.dataTransfer.setData("text/plain", ev.target.nom); event.dataTransfer.effectAllowed = "copy"; }
la question est tu le sors d'où cet event ?

Bonjour,

je pense que le principal problème est à cette ligne :

Code:

ev.dataTransfer.setData("text/plain", ev.target.nom);

Mais comme NoSmoking l’a fait remarquer, il y a également une variable event qui n’a pas été définie.

Ouvre ta console avec F12, et assure-toi que tu es sur l’onglet console. Modifie ta fonction drag comme suit :
Code:

1 2 3 4 5 6 function drag(ev) { console.log("target:", ev.target); console.log("nom:", ev.target.nom); ev.dataTransfer.setData("text/plain", ev.target.nom); ev.dataTransfer.effectAllowed = "copy"; }
Et tu verras assez vite le problème : l’élément déplacé n’a pas de propriété nom. Il faut que tu l’ajoutes au moment de la génération par PHP, par exemple dans un attribut data :
Code:

1 2 ... echo "<div ... ondragstart='drag(event)' ... data-nom='{$donnees['nom']}'>";
Les attributs data exposent une interface dataset dans le DOM, ça te permet de les manipuler facilement :

Code:

ev.dataTransfer.setData("text/plain", ev.target.dataset.nom);

:!: Attention dans ta boucle while tu génères une balise avec un id, ce qui fait que tu auras plusieurs fois le même id dans la page. Si ton code JavaScript utilise cet id, tu n’auras accès qu’au premier élément généré. Il vaut mieux que tu remplaces cet id par une classe.

Attention également, c’est souvent une mauvaise idée de générer du code JavaScript avec PHP (ou autre langage). Les imbrications de code rendent la relecture et la maintenance difficile. Dans 99 % des cas, il est possible de réécrire le code JavaScript de manière statique.
Code:

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 <div id="liste1" draggable="true"> <?php //Appel de ma base de données $reponse = $bdd->query('SELECT * FROM CIF ORDER BY nom'); while ($donnees = $reponse->fetch()) { echo "<div> <div class='nom' draggable='true' data-nom='{$donnees['nom']}'> {$donnees['nom']} {$donnees['prenom']} </div> </div>"; } ?> <script> 'use strict'; var dragImg = new Image(); dragImg.src = 'curseur.jpg'; for (let divNom of document.querySelectorAll('.nom')) { divNom.addEventListener('dragover', allowDrop); divNom.addEventListener('dragstart', function (e) { e.dataTransfer.setDragImage(dragImg, 30, 30); // appelle ta fonction drag drag(e); }); } </script> </div>
Dans l’idéal, place le script à la fin du <body> ; je l’ai ici mis juste pour faire simple.

07/06/2018, 16h38
marjan

Merci aux personnes qui m'ont répondu.
Excusez-moi, j'ai été absent deux jours et je prends connaissance juste maintenant des réponses.
Les explications données me confortent sur ce que je pensais, et je vais faire des essais comme vous me le suggérez.
C'est bien la définition de ev.target.nom qui est en cause.
Je vous tiendrai au courant des résultats.
Merci

Me revoilà. J'ai un peu avancé suite à vos explications. Il reste quelques difficultés.
Pour info, je travaille sur MAC et utilise indifféremment tous les navigateurs mais de préférence FIREFOX ou SAFARI.
Je me sers de la console des deux navigateurs et je constate des différences inquiétantes !......
Selon vos suggestions, j'ai utilisé dataset et j'ai un bon résultat je pense, de plus j'ai compris la fonction de dataset.
Je vérifie par les alertes que j'ai installées :
alert('élément déposé !') qui ne pose pas de problème.
alert(e.dataTransfer.getData('text/plain')) , elle, pose un problème avec FIREFOX. La console indique TypeError: e.dataTransfer is null
et pourtant, tout marche bien avec SAFARI où le texte glissé est bien contenu dans l'alerte. !......
Autre anomalie :
Je souhaite glisser les noms et prénoms de la liste dans 6 groupes nommés groupe1,groupe2,groupe3,groupe4 ........groupe6.
Dans mon essai pour mise au point, je mets 3 groupes pour ne pas allonger le code exagérément.
Lors du glissement, j'encadre le groupe choisi lors du survol , or en survolant le groupe1, c'est le groupe3 (le dernier? ) qui s'encadre ????
J'ai exagérément grossi l'encadrement des div pour mieux voir ce qui se passe. C'est toujours le dernier groupe qui indique la zone de dépôt, ce qui est normal puisque les scripts s'exécutent.
Comment distinguer les différentes zones de dépôt ? Je pensais que le script contenu dans la div n'allait s'appliquer qu'à cette div.
A priori NON.

Voici une partie du code qui devrait suffire pour la compréhension.

Code:

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
$reponse = $bdd->query('SELECT * FROM CIF ORDER BY nom');
		?>
		<div id = "liste1" draggable="true" style="background-color:#00FFFF;font-size: 10px;height: 550px;" />
			<?php
                                WHILE ($donnees = $reponse->fetch())
                                {       
                                                        $nomprenom = $donnees['nom']." ".$donnees['prenom'];
                                                        echo "<div 'nom' draggable='true' ondragstart='drag(event)' ondragover='allowDrop(event)' data-nom='{$nomprenom}'>";
                                                        echo $donnees['nom']." ".$donnees['prenom'] ; $nomprenom = $donnees['nom']." ".$donnees['prenom'];
                                                        ?>
							</div>
 
							<script>
                                                        var dragImg = new Image(); 
                                                        dragImg.src = 'curseur.jpg';
                                                        document.querySelector('*[draggable="true"]').addEventListener('dragstart', function(e) {
                                                        e.dataTransfer.setDragImage(dragImg, 30, 30);
                                                        });
                                                        </script>
 
					<?php                           
                                }
                                ?>
		</div> 
		<div id = "groupe1" >
			<?php
                        $reponse = $bdd->query('SELECT nomgroupe1 FROM groupes ORDER BY nomgroupe1');
                        WHILE ($donnees = $reponse->fetch())
                        {
                                if ($donnees['nomgroupe1']!= ""){
                                        echo $donnees['nomgroupe1'];echo'<br>';
                                }
                        }       
                        ?>
			<script>
                        document.querySelector('#groupe1').addEventListener('dragover', function(e) {
                e.preventDefault(); // Annule l'interdiction de drop
                        });
                        document.querySelector('#groupe1').addEventListener('drop', function(e) {
                e.preventDefault(); // Cette méthode est toujours nécessaire pour éviter une éventuelle redirection inattendue
                alert('élément déposé !');
                dropper.style.borderStyle = 'solid';
                        });
                        var dropper = document.querySelector('#groupe1');
                        dropper.addEventListener('dragenter', function() {
                        dropper.style.borderStyle = 'dashed';
                        });
                        dropper.addEventListener('dragleave', function() {
                         dropper.style.borderStyle = 'solid';
                        }); // Cet événement détecte n'importe quel drag & drop qui se termine, autant le mettre sur « document » :
                
                        dropper.addEventListener('drop', function(e) {
                alert(e.dataTransfer.getData('text/plain')); // Affiche le contenu du type MIME « text/plain »
                        },false);
                        </script>
		</div>
 
		<div id = "groupe2" >
			<?php
                        $reponse = $bdd->query('SELECT nomgroupe1 FROM groupes ORDER BY nomgroupe2');
                        WHILE ($donnees = $reponse->fetch())
                        {
                                if ($donnees['nomgroupe2']!= ""){
                                        echo $donnees['nomgroupe2'];echo'<br>';
                                }
                        }       
                        ?>
			<script>
                        document.querySelector('#groupe2').addEventListener('dragover', function(e) {
                e.preventDefault(); // Annule l'interdiction de drop
                        });
                        document.querySelector('#groupe2').addEventListener('drop', function(e) {
                e.preventDefault(); // Cette méthode est toujours nécessaire pour éviter une éventuelle redirection inattendue
                alert('élément déposé !');
                dropper.style.borderStyle = 'solid';
                        });
                        var dropper = document.querySelector('#groupe2');
                        dropper.addEventListener('dragenter', function() {
                        dropper.style.borderStyle = 'dashed';
                        });
                        dropper.addEventListener('dragleave', function() {
                         dropper.style.borderStyle = 'solid';
                        }); // Cet événement détecte n'importe quel drag & drop qui se termine, autant le mettre sur « document » :
                
                        dropper.addEventListener('drop', function(e) {
                alert(e.dataTransfer.getData('text/plain')); // Affiche le contenu du type MIME « text/plain »
                        },false);
                        </script>
		</div>
 
		<div id = "groupe3" >
			<?php
                        $reponse = $bdd->query('SELECT nomgroupe1 FROM groupes ORDER BY nomgroupe2');
                        WHILE ($donnees = $reponse->fetch())
                        {
                                if ($donnees['nomgroupe3']!= ""){
                                        echo $donnees['nomgroupe3'];echo'<br>';
                                }
                        }       
                        ?>
			<script>
                        document.querySelector('#groupe3').addEventListener('dragover', function(e) {
                e.preventDefault(); // Annule l'interdiction de drop
                        });
                        document.querySelector('#groupe3').addEventListener('drop', function(e) {
                e.preventDefault(); // Cette méthode est toujours nécessaire pour éviter une éventuelle redirection inattendue
                alert('élément déposé !');
                dropper.style.borderStyle = 'solid';
                        });
                        var dropper = document.querySelector('#groupe3');
                        dropper.addEventListener('dragenter', function() {
                        dropper.style.borderStyle = 'dashed';
                        });
                        dropper.addEventListener('dragleave', function() {
                         dropper.style.borderStyle = 'solid';
                        }); // Cet événement détecte n'importe quel drag & drop qui se termine, autant le mettre sur « document » :
                
                        dropper.addEventListener('drop', function(e) {
                alert(e.dataTransfer.getData('text/plain')); // Affiche le contenu du type MIME « text/plain »
                        },false);
                        </script>
		</div>

et voici une partie du css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div#groupe1
{
width:150px;
height:200px ;
font-size: 10px;
margin-top: 0px;
margin-left:170px;
position: absolute; z-index: 3;
border: 5px solid #333;
background-color:#ed12f0;
}
 
div#groupe2
{
width:150px;
height:200px ;
font-size: 10px;
margin-top: 0px;
margin-left:335px;
position: absolute; z-index: 4;
border: 5px solid #333;
background-color:#ed12f0;
}

Merci de me suggérer des solutions;

Pour commencer on va dire que ton code PHP est inexploitable pour nous, il faut nous mettre le code HTML généré.
Pour continuer évite de mélanger PHP et JS tu y gagneras en clarté, nous aussi, et tu pourras plus aisément voir ce que tu peux factoriser.

Comment je vois l'approche ?

Déclaration de toutes les fonctions applicables au D&D ;
Récupérations des éléments concernés ;
Affectation de ces fonctions à ces éléments suivant leur rôle.

de la sorte tu pourras ajouter/retrancher des éléments sans avoir à modifier ton code.

Je te livre un fichier de Drag & Drop simple, que j'ai comme base, qui te montre ce que je viens d'écrire.

Code:

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
<!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">
<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;
}
.drag-over {
  background: #EEF;
}
.zone-groupe {
  display: flex;
}
ul:empty {
  background: #FEE;
  border: 1px solid #CAB;
}
li {
  display: block;
  width: 10em;
  margin: .25em 0;
  padding: .5em;
  border: 1px dashed #999;
  list-style: none;
  background: #EEE;
}
*[draggable=true] {
  cursor: move;
  -moz-user-select: none;
  -khtml-user-drag: element;
}
li[draggable=true]:hover {
  border-color: #333;
  background: #ccc;
}
.drop-zone li {
  margin: .25em auto;
}
.drop-zone {
  display: inline-block;
  margin: 1em;
  padding: 0;
  min-height: 15em;
  min-width: 15em;
  border: 1px solid #ABC;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Drag and drop</h1>
  </header>
  <section>
    <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>
        <h2>Groupe 3</h2>
        <ul class="drop-zone"></ul>
      </div>
    </div>
    <h2>Liste noms</h2>
    <ul id="liste" class="drop-zone">
      <li>Lundi</li>
      <li>Mardi</li>
      <li>Mercredi</li>
      <li>Jeudi</li>
      <li>Vendredi</li>
      <li>Samedi</li>
      <li>Dimanche</li>
    </ul>
  </section>
</main>
<script>
function handleDragStart(e) {
  var idTemp = "drag-en-cours"
  this.id = idTemp;
  e.dataTransfer.setData('Text', idTemp);
  e.dataTransfer.effectAllowed = 'copy';
}
function handleDragEnter(e) {
  this.classList.add("drag-over");
  return false;
}
function handleDragOver(e) {
  if (e.preventDefault) e.preventDefault();
  this.classList.add("drag-over");
  e.dataTransfer.dropEffect = 'copy';
  return false;
}
function handleDragLeave(e) {
  this.classList.remove("drag-over");
  return false;
}
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();    
  }
  var elem = document.getElementById(e.dataTransfer.getData('Text'));
  elem.id = "";
  this.appendChild(elem);
  this.classList.remove("drag-over");
  return false;
}
var oElems = document.querySelectorAll('#liste li');
var i;
var nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  oElems[i].setAttribute('draggable', 'true');
  oElems[i].addEventListener('dragstart', handleDragStart, false);
}
 
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);
}
</script>
</body>
</html>

Comme je l'ai dit c'est une base, il n'y a pas de commentaire mais cela devrait d'éclairer sur une façon de faire.

Tu peux ajouter un groupe supplémentaire sans rien avoir d'autre à faire.

11/06/2018, 21h25
marjan

Bonsoir,

Un grand merci pour vos contributions.
Je n'aurais jamais oser vous demander une solution 'clés en mains', mais j'apprécie beaucoup la réponse de Nosmoking qui m'a procuré en fait la solution intégrale à mon problème, chose que je n'arrivais pas à trouver sur les multiples recherches que j'ai faites sur Internet.
Avec ça, je pense pouvoir faire un bond dans la compréhension de cet API et des usages Javascript que je maîtrise pas encore.
Merci pour tout.

MC.
21/06/2018, 10h32
marjan

Bonjour,

Je commence à assimiler l'exemple que m'a fourni NoSmoking. (merci à lui)
Une chose que je ne comprends pas, c'est pourquoi lors d'un déplacement d'un élément de la liste, celui-ci s'efface de son emplacement d'origine (la liste) alors que l'appel à datatransfert annonce bien copy dans dropEffect : e.dataTransfer.dropEffect = 'copy' .

J'ai essayé des tas de choses, mais pour l'instant je n'y arrive pas.
Cela m'est utile, car la même personne peut être affectée à deux groupes à la fois et j'aurais besoin de faire deux drag and drop successifs.

Citation:

Envoyé par marjan

pourquoi lors d'un déplacement d'un élément de la liste, celui-ci s'efface de son emplacement d'origine (la liste) alors que l'appel à datatransfert annonce bien copy dans dropEffect : e.dataTransfer.dropEffect = 'copy' .

Comme indiqué dans la doc :

Citation:

The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation.

Ou en français :

Citation:

La propriété DataTransfer.dropEffect contrôle le feedback (typiquement visuel) donné à l’utilisatrice ou utilisateur durant une opération de drag and drop.

Ainsi, ça a un rôle purement informatif. Si tu veux qu’une copie soit faite, il faut ajouter un appel à cloneNode dans le code. Si je reprends l’exemple de NoSmoking, c’est dans la fonction handleDrop et ça peut se faire comme ceci :
Code:

1 2 3 4 5 6 7 var elem = document.getElementById(e.dataTransfer.getData('Text')); var clone = elem.cloneNode(true); clone.id = ""; this.appendChild(clone); this.classList.remove("drag-over"); return false; }
Éventuellement, tu peux rajouter des if pour choisir si tu clones ou pas, en fonction de la destination du drop.

21/06/2018, 20h03
marjan

Merci Watilin, ça marche très bien. J'ai découvert cloneNode.
Il me reste encore à traiter la page et transmettre ces données à ma base de données.
Encore vraisemblablement un gros morceau à traiter pour quelqu'un qui est débutant en Javascript !...
mais je garde espoir.

Je ferais juste une petite correction, comme on utilise une ID temporaire il y a lieu de la supprimer de l'élément déplacé et autant le faire avant clonage
Code:

1 2 3 4 5 6 var elem = document.getElementById(e.dataTransfer.getData("Text")); elem.id = ""; var clone = elem.cloneNode(true); this.appendChild(clone); this.classList.remove("drag-over"); return false;
Le fait de vouloir garder l'original me semble étrange mais ... bon ...

23/06/2018, 10h02
marjan

Bonjour,

Merci pour tes conseils.

J'essaye de partir d'un principe simple :
La liste des personnes est immuable et toujours la même.
Je "pioche" dans cette liste pour affecter des individus à des groupes.
Certains individus peuvent être affectés à plusieurs groupes. J'effectue donc plusieurs DnD avec le même individu de la liste vers plusieurs groupes.

Par contre, il me reste une difficulté à résoudre.
Si par malheur j'ai fait une erreur d'affectation je souhaiterai pouvoir effacer l'affectation de l'individu dans le groupe en cause.
Pour l'instant, pas de possibilité d'effacement, ni d'annulation du déplacement.
24/06/2018, 09h41
NoSmoking

Il te faut bien définir ton besoin à savoir (en vrac)
• Ajout d'un bouton supprimer, ou choix d'un double clic ;
• DnD d'un groupe à l'autre OUI-NON mais que se passe t-il, duplication ou simple déplacement ;
• DnD retour dans la liste d'origine, peut être en conclure que l'on supprime l'élément « drppé » ;
• ... ;
Essaie également de lister les erreurs potentielles comme un DnD d'un groupe dans le même groupe par exemple.

Dans tous les cas il va te falloir gérer cela dans la fonction handleDrop mais la définition du besoin est nécessaire avant toute ligne de code.

Bonjour NoSmoking,

Je me vois contraint de te solliciter à nouveau pour l'amélioration du script que tu m'as soumis.
Voici le script exemple qui va permettre de nous expliquer :
J'ai fait des listes de prénoms tous différents.
Evidemment, dans la vraie vie, il y a des doublons.
Je distingue les individus par leur patronyme complet prénom + nom et je gère cela en PHP.
Je constitue donc mes listes avec un appel en PHP à ma bdd.

Code:

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
 
<!--Programme en cours de modifs de Drag and Drop 
/CIF/essai.php -->
 
 
 
<!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">
<style>
html, body {
  position: absolute;
  margin: 0 auto;
  padding: 0;
  max-width: 100em;
  font: 10px Verdana,sans-serif;
  font-weight: bold;
}
h1, h2, h3 {
  color: #069;
  margin: .30em 0
}
section {
  display: block;
  margin: 0 .5em;
}
.drag-over {
  background: #EEF;
}
.zone-groupe {
  display: flex;
}
ul:empty {
  background: #FEE;
  border: 1px solid #CAB;
}
li {
  display: block;
  width: 15em;
  margin: .25em 0;
  padding: .1em;
  border: 1px dashed #999;
  list-style: none;
  background: #EEE;
}
*[draggable=true] {
  cursor: move;
  -moz-user-select: none;
  -khtml-user-drag: element;
}
li[draggable=true]:hover {
  border-color: #333;
  background: #ccc;
}
.drop-zone li {
  margin: .25em auto;
}
.drop-zone {
  display: inline-block;
  margin: 1em;
  padding: 0;
  min-height: 30em;
  min-width: 15em;
  border: 1px solid #ABC;
}
</style>
 
</head>
<body>
<main>
  <header>
    <h1>Faites glisser les personnages de gauche dans l'un des groupes et relâcher</h1>
  </header>
  <section>
    <div class="zone-groupe">
    	<div>
    		<h2>Liste noms</h2>    
    		<ul id="liste" class="drop-zone">
				<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>
      	<div>
        	<h2>Groupe 1</h2>
        	<ul id ="liste" class="drop-zone">
        		<li>Sébastien</li>
				<li>Vincent</li>
				<li>Louis</li>
        	</ul>
      	</div>
      	<div>
        	<h2>Groupe 2</h2>
        	<ul id ="liste" class="drop-zone">
        		<li>Michel</li>
				<li>Patrick</li>
				<li>François</li>
        	</ul>
      	</div>
      	<div>
        	<h2>Groupe 3</h2>
        	<ul id ="liste" class="drop-zone">
				<li>Sébastien</li>
				<li>Michel</li>
				<li>Bernard</li>
				<li>Marc</li>
        	</ul>
      	</div>
      	<div>
        	<h2>Groupe 4</h2>
        	<ul id ="liste" class="drop-zone">
				<li>Alain</li>
        	</ul>
      	</div>
      	<div>
        	<h2>Groupe 5</h2>
        	<ul id ="liste" class="drop-zone">
 
        	</ul>
      	</div>
      	<div>
       		<h2>Groupe 6</h2>
        	<ul id ="liste" class="drop-zone">
				<li></li>
        	</ul>
      	</div>
    </div>
  </section>
</main>
<script>
 
function handleDragStart(e) {
        /* L’utilisateur commence à faire glisser l’élément déplacé
           ici on enregistre dans datatransfert la variable idTemp en lui disant "copy"
        */
  var idTemp = "drag-en-cours";
  this.id = idTemp;
  e.dataTransfer.setData('text', idTemp);
  e.dataTransfer.effectAllowed = 'copy';
}
 
function handleDragEnter(e) {
        /* un élément glissé entre dans la zone de l’élément cible */
  this.classList.add("drag-over");
  return false;
}
function handleDragOver(e) {
        /* un élément glissé survole la zone de l’élément cible */
  if (e.preventDefault) e.preventDefault();
  this.classList.add("drag-over");
  e.dataTransfer.dropEffect = 'copy';
  return false;
}
 
function handleDragLeave(e) {
        this.classList.remove("drag-over");
  return false;
}
 
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();    
        }
 
 
        var elem = document.getElementById(e.dataTransfer.getData('Text'));
        elem.id = "transfert";
        var clone = elem.cloneNode(true);
        this.appendChild(clone);
        this.classList.remove("drag-over");
        return false;
}
 
var oElems = document.querySelectorAll('#liste li');
var i;
var nb = oElems.length;
for (i = 0; i < nb; i += 1) {
  oElems[i].setAttribute('draggable', 'true');
  oElems[i].addEventListener('dragstart', handleDragStart, false);
}
 
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);
}
</script>
</body>
</html>

Il y a à gauche une liste d'individus et on souhaite les affecter dans des groupes (de 1 à 6).

• Le même individu peut appartenir à plusieurs groupes. On peut donc le droper dans plusieurs groupes.
• Un individu ne doit pas être plusieurs fois dans le même groupe. Il faut donc interdire le drop si l'individu est déjà là.
• Actuellement, on peut draguer un individu dans un groupe et le droper dans ce même groupe ???? Anomalie !.
• Enfin, en cas de mauvais glissement, il faut pouvoir annuler l'opération ou effacer un individu d'un groupe.

Voilà mes contraintes souhaitées.
J'essaye bien par tous moyens, mais je suis coincé par le temps. Il ne me reste plus que les vacances pour arriver à la solution.
Ton aide me sera précieuse pour y arriver.
J'essaye bien de réétudier les bouquins de JS,HTML5, et tout ce que je trouve sur Internet, mais ça n'avance pas vite.

Merci d'avance.

Marc

• Pour commencer une mise en garde concernant le code HTML.

Attention à la construction de tes listes de réception <ul>, elles ne doivent pas avoir d'id identique si besoin, une ID DOIT être UNIQUE dans un document.
Tes listes ne doivent pas contenir d'éléments <li> vide.

• Résumé des demandes hors correction erreur déplacement

Code:

1
2
3
4
5
6
7
8
9
SI Drop dans la liste originale ALORS
    Supprimer l'élément en cours de Drag
SINON
    SI l'élément est déjà dans la liste ALORS
        Ne rien faire
    SINON
        Déposer l'élément
    FINSI
FINSI

• Correction erreur déplacement

Comme on le voit sur le petit algo ci-dessus le fait de remettre un élément dans la liste d'origine le supprime dans la liste de provenance.

Pour supprimer un item de sa liste nous allons ajouter dynamiquement, lors de l'initialisation, un bouton à chacun d'eux et grâce au CSS seuls ceux des groupes de destination seront visibles.
Le code du bouton

Code:

<span class='btn-close' title='Supprimer' onclick='removeParent(this)'>&#1001O;</span>"

La fonction de suppression

Code:

1
2
3
4
function removeParent(elem) {
  var oParent = elem.parentNode;
  oParent.parentNode.removeChild(oParent);
}

c'est du simple et je dirais du « standard ».

• Test de la présence dans la liste

Pour tester l'existence d'un item dans une liste il nous faut pouvoir les reconnaître, pour cela nous allons ajouter dynamiquement à chacun un data-num correspondant au texte affiché.
On obtient donc au final un code proche de

Code:

1
2
3
4
<li draggable="true" data-num="Sébastien">
  Sébastien
  <span class="btn-close" title="Supprimer" onclick="removeParent(this)">&#1001O;</span>
</li>

La fonction d'existence, existeDeja, est à voir dans l'exemple complet ci-après.

De plus cela nous permettra de récupérer les données de chaque liste pour un envoi au serveur par exemple.

• Au final

Il nous faut également différencier la liste originale des autres chose que l'on fait en ajoutant une class="liste-origine", classe que l'on peut utiliser pour le CSS.

Au final seule la fonction handleDrop est concernée par les changement au niveau du D&D

Code:

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.classList.remove("drag-over");
  return false;
}

L'initialisation quant à elle est modifier pour tenir compte des besoins de gestion

Code:

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
// initialisation des <li> drag-droppables
var htmlBtn = "<span class='btn-close' title='Supprimer' onclick='removeParent(this)'>&amp;#10010;</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);
}

• Pour conclure le fichier test

Code:

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)'>&amp;#10010;</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>

et l'exemple en ligne

Je crois que je n'ai rien oublié d'important.

06/07/2018, 18h28
marjan

Merci NoSmoking.:bravo:

Décidément, je n'ai pas le niveau pour imaginer tout ça.
Par contre, tes explications vont me permettre d'avancer dans la compréhension du Javascript et du HTML.
Je me suis procuré plusieurs livres de prog de Javascript et je vais pouvoir potasser ça pendant ces périodes de vacances et essayer de tout comprendre.
La programmation est un vrai métier, et je ne suis qu'un amateur malheureusement.
Je vous tiendrai au courant d'ici fin Juillet ou Aout.

Bonjour NoSmoking,

Comme convenu, j'ai travaillé et compris peu à peu l'ensemble des actions script ou html proposées.
J'y ai apporté diverses modifications :
1°) dans la disposition des colonnes (celle de la liste d'origine et celles des groupes de 1 à 6 réparties sur la largeur de l'écran.)
2°) dans la suppression du bouton effacement de la liste d'origine. En effet, je ne veux pas que l'utilisateur efface un membre de la liste d'origine.
Pour ce faire, j'ai créé une nouvelle classe que j'ai appelée tout simplement "zone" et à laquelle j'ai ajouté un style ne comprenant pas de bouton d'effacement.
Tout est donc bien. ma liste d'origine n'a pas de bouton d'effacement, et les groupes, eux en ont un.
Seulement, petit problème, lorsque je drag et drop un élément de ma liste d'origine vers la liste d'un groupe, je "n'embarque" pas le bouton d'effacement alors que je souhaiterai l'avoir dans la liste des groupes.
Je n'ai pas réussi cette condition.
3°) Dans le résultat, je n'arrive pas à changer les numéros des groupes qui sont décalés de une unité.
Le résultat me donne :
groupe 2 au lieu de groupe 1
groupe 3 au lieu de groupe 2
etc...
est-ce que ceci vient du fichier en JSON ? ou des données de dataTransfer ?....?....

Je vous joins l'ensemble du programme que j'ai modifié.
Par souci de protection des données, je ne donne pas accès à ma base de données et remplace l'appel à la base par un faux nom.
Je pense que cela ne vous ennuiera pas pour comprendre les modifs que j'ai faites.

Code:

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
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
 
<!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: absolute;
  margin: 0 auto;
  padding: 0;
  max-width: 100em;
  font: 12px Verdana,sans-serif;
  font-weight: bold;
}
 
h1, h2, h3 {
  color: #069;
  margin: .30em 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: nowrap;
}
.zone-groupe > div {
 flex: 0 0 16%;
}
 
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 {
// changement d apparence au survol
  border-color: #333;
  background: #CDE;
}
.drop-zone {
  margin: 1em;
  padding: 0;
  min-height: 15em;
  min-width: 15em;
  border: 1px solid #ABC;
  font-size: .8em;
}
.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;
  cursor: pointer;
}
.btn-close:hover {
  color: #FFF;
  background: #F00;
}
.liste-origine .btn-close {
  display: none;
}
</style>
<?php 
        $bdd = new PDO('mysql:host=mabase.fr.mysql;dbname=mabase', 'mabase', 'monmdp', array (PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\''));
        $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
</head>
<body>
<main>
  <header>
    <h1>Faites glisser les personnages de gauche dans un des groupes et relâcher</h1>
  </header>
  <section>
    <h2>Liste noms</h2>
		<div class="zone-groupe">
    		<ul id="listenoms" class="zone">
				<?php
                        $reponse = $bdd->query('SELECT * FROM identite WHERE lion = 1 AND parti = 0 AND deces = 0 ORDER BY nom');
                        WHILE ($donnees = $reponse->fetch())
                                {       
                                        echo'<li>';echo $donnees['Nom']." ".$donnees['Prenom'];echo'</li>';
                                }
                                ?>
    		</ul>
 
      		<div>
        		<h2>Groupe 1</h2>
        		<ul id = "G1" class="drop-zone">
          			<?php
                                $reponse = $bdd->query('SELECT nomgroupe1 FROM groupes WHERE nomgroupe1 != ""');
                                WHILE ($donnees = $reponse->fetch())
                                        {       
                                                echo'<li>';echo $donnees['nomgroupe1'];echo'</li>';
                                        }
                                        ?>
        		</ul>
      		</div>
      		<div>
       		 	<h2>Groupe 2</h2>
       			<ul id = "G2"  class="drop-zone">
          			<?php
                                $reponse = $bdd->query('SELECT nomgroupe2 FROM groupes WHERE nomgroupe2 != ""');
                                WHILE ($donnees = $reponse->fetch())
                                        {       
                                                echo'<li>';echo $donnees['nomgroupe2'];echo'</li>';
                                        }
                                        ?>
        		</ul>
      		</div>
     		 <div>
       			<h2>Groupe 3</h2>
        		<ul id = "G3"  class="drop-zone">
          			<?php
                                $reponse = $bdd->query('SELECT nomgroupe3 FROM groupes WHERE nomgroupe3 != ""');
                                WHILE ($donnees = $reponse->fetch())
                                        {       
                                                echo'<li>';echo $donnees['nomgroupe3'];echo'</li>';
                                        }
                                        ?>
        		</ul>
      		</div>
      		<div>
       			<h2>Groupe 4</h2>
        		<ul id = "G4"  class="drop-zone">
         			<?php
                                $reponse = $bdd->query('SELECT nomgroupe4 FROM groupes WHERE nomgroupe4 != ""');
                                WHILE ($donnees = $reponse->fetch())
                                        {       
                                                echo'<li>';echo $donnees['nomgroupe4'];echo'</li>';
                                        }
                                        ?>
        		</ul>
      		</div>
      		<div>
       			 <h2>Groupe 5</h2>
       			<ul id = "G5"  class="drop-zone">
       				<?php
                                $reponse = $bdd->query('SELECT nomgroupe5 FROM groupes WHERE nomgroupe5 != ""');
                                WHILE ($donnees = $reponse->fetch())
                                        {       
                                                echo'<li>';echo $donnees['nomgroupe5'];echo'</li>';
                                        }
                                        ?>
        		</ul>
      		</div>
      		<div>
        		<h2>Groupe 6</h2>
        		<ul id = "G6"  class="drop-zone">
        			<?php
                                $reponse = $bdd->query('SELECT nomgroupe6 FROM groupes WHERE nomgroupe6 != ""');
                                WHILE ($donnees = $reponse->fetch())
                                        {       
                                                echo'<li>';echo $donnees['nomgroupe6'];echo'</li>';
                                        }
                                        ?>
        		</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 = 1; 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)'>&amp;</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);
}
 
// ajout de la nouvelle zone (sans bouton effacer)
var oElems = document.querySelectorAll(".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;
}
 
// 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>

Citation:

1°) dans la disposition des colonnes (celle de la liste d'origine et celles des groupes de 1 à 6 réparties sur la largeur de l'écran.)

Tu fais bien ce que tu veux du code que l'on t'a fourni, j'espère juste que tes écrans de sortie sont assez large ;).

Citation:

2°) dans la suppression du bouton effacement de la liste d'origine. En effet, je ne veux pas que l'utilisateur efface un membre de la liste d'origine.
Pour ce faire, j'ai créé une nouvelle classe que j'ai appelée tout simplement "zone" et à laquelle j'ai ajouté un style ne comprenant pas de bouton d'effacement.
Tout est donc bien. ma liste d'origine n'a pas de bouton d'effacement, et les groupes, eux en ont un.
Seulement, petit problème, lorsque je drag et drop un élément de ma liste d'origine vers la liste d'un groupe, je "n'embarque" pas le bouton d'effacement alors que je souhaiterai l'avoir dans la liste des groupes.
Je n'ai pas réussi cette condition.

Tu t'es :zekill: une balle dans le pied, dans le code fourni le bouton supprimer n'est pas accessible celui-ci étant en display:none, donc il n'y a pas de risque et celui-ci devient actif lorsque l'élément est déposé dans tes groupes.
Code:

1 2 3 .liste-origine .btn-close { display: none; }
Citation:

3°) Dans le résultat, je n'arrive pas à changer les numéros des groupes qui sont décalés de une unité.
...
est-ce que ceci vient du fichier en JSON ? ou des données de dataTransfer ?....?....

Comme tu as changé la gestion des listes il ne te faut pas incrémenter l'index dans la fonction getGroupes.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function getGroupes() { var prefixe = "groupe"; var result = {}; var oElems = document.querySelectorAll(".zone-groupe ul"); var i; var oElem; var j; var tab; for (i = 1; 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; // pas d'incrémentation ici result[prefixe + i] = tab; } return result; }

03/08/2018, 16h36
marjan

Merci beaucoup NoSmoking.
Les multiples essais que j'ai fait en modifiant les éléments du programme m'ont fait perdre un peu la tête. (et par ces chaleurs .......)
Tes dernières explications m'ont rééclairé et tout marche maintenant comme je le souhaitais.
Merci pour tout, j'ai tous les éléments pour comprendre l'ensemble, mais il y a encore du boulot.

Peut-être à une autre fois ?
08/08/2018, 17h34
marjan

Bonsoir NoSmoking,

Je ne pensais pas te demander encore quelque chose, mais si tu pouvais encore m'aider, j'en serai ravi.
Cela paraît pourtant simple.
Lorsque j'applique le dernier script que tu m'as fourni, il y a en bas le résultat des opérations de drag n drop.
j'ai inséré dans le formulaire un bouton pour envoyer le résultat sur le serveur, pour ensuite l'exploiter en php et modifier les tables de ma bdd.
Etant encore très débutant en Javascript, je ne sais comment programmer le bouton pour envoyer les variables du fichier data en post vers le fichier php de récupération.
Peux-tu me mettre sur la voie s'il te plaît.
Merci

L'envoi des données peut se faire en utilisant la technique Ajax et en transmettant les données sous la forme d'un objet « sérializé » avec la méthode JSON.stringify().
Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 function sendData() { // récup. des donnéees var dataGroupes = JSON.stringify(getGroupes()); // création objet requête var oReq = new XMLHttpRequest(); // définition et envoi des données oReq.open("POST", "fichier-de-traitement-json.php", true); oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); oReq.send("groupes=" + dataGroupes); }
Côté serveur il te suffit de décoder la chaîne avant utilisation, par exemple
Code:

1 2 3 4 5 6 7 8 9 10 <?php if (!empty( $_POST["groupes"])) { $datas = json_decode($_POST["groupes"], true); forEach ($datas as $name => $data) { forEach ($data as $value) { // traitement des données } } } ?>
Ne pas oublier les vérifications d'usage.

09/08/2018, 14h15
marjan

Merci beaucoup de ton aide.
Je vois la construction de la fonction sendData, et je vais la potasser.
Côté PHP, je pense me débrouiller, d'autant que tu m'as donné la solution.
Enfin, je vois le bout du problème.
Ce que je regrette, c'est que les bouquins expliquant D&D ne traitent pas le problème de fond en comble, car ils donnent des exemples avec des prérequis dignes d'un cursus de plusieurs années d'études !....
Heureusement, ce forum permet des réponses adaptées à chaque cas.
J'ai vraiment beaucoup apprécié ton aide.

Marc

Cher NoSmoking, j'ai encore besoin de tes services si tu veux bien.
La fonction sendData est déclenchée par mon bouton avec onclick = "sendData()"
Normalement le ficher JSON est envoyé par POST au fichier PHP intitulé "traitementfichierJson.php". (dans le même dossier)
Pour le voir à l'écran, je suis bien obligé de faire un appel à ce fichier avec window.location.href="traitementfichierJson.php" que j'ai mis dans sendData. Je suis bien redirigé sur le fichier de traitement.
Je teste l'existence du fichier posté ["groupes"] ----> ce qui ne donne rien !... Groupes non posté .....je ne comprends plus.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function sendData() { // récup. des donnéees var dataGroupes = JSON.stringify(getGroupes()); // création objet requête var oReq = new XMLHttpRequest(); // définition et envoi des données oReq.open("POST", "traitementfichierJson.php", true); oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); oReq.send("groupes=" + dataGroupes); window.location.href="traitementfichierJson.php"; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php if (!empty( $_POST["groupes"])) { $datas = json_decode($_POST["groupes"], true); forEach ($datas as $name => $data) { echo $name . ':'; forEach ($data as $value) { echo ' ' . $value; // traitement des données } } }else{ echo 'Groupes non postés'; } ?>

12/08/2018, 11h13
marjan

Je pense que je me débrouillerai pour décoder le fichier JSON, j'ai trouvé des exemples sur Internet.
Par contre, où ça coince : malgré le send() ---> oReq.send("groupes=" + dataGroupes);
je ne trouve pas le fichier dans le POST de "traitementfichierJson.php". ??
20/08/2018, 17h30
marjan

Explication peut-être un peu plus claire
En activant la console de mon navigateur, je vois bien la ligne ;
XHR POST http://......../traitementfichierJson.php
et dans les paramètres transmis :
groupes={"groupe1":["1. François ... etc.} les modifs apportées par les Drag and Drop sont bien prises en compte.
Dans le fichier PHP, je reçois théoriquement ces données sous le nom 'groupes'.
Donc, en testant le POST['groupes'], ce fichier PHP devrait pouvoir me dire qu'il a reçu le fichier 'groupes' et me répondre.
C'est pour cela que j'ai juste écrit ;
Code:

1 2 if (!empty( $_POST["groupes"])) echo 'fichier reçu';
Or, cela ne marche pas.
Peux-tu me donner une explication s'il te plait ?
Merci d'avance.
21/08/2018, 21h58
marjan

Merci à tous pour vos contributions.
J'ai été conseillé et on a trouvé la solution.
Une erreur de code dans :
oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");