Discussion :

[marjan]

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 :

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

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 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
//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.

[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 :

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

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 ?

[Watilin]

Bonjour,

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

Code :

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

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 js :

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

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 php :

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

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 js :

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

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 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
<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.

[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

[marjan]

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

[NoSmoking]

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 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
<!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.

[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.