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.