Bonjour,
Je souhaiterais que quelqu'un puisse m'aider, je n'arrive pas à finaliser le drag and drop suivant :
J'ai une premiere div qui contient une liste d'individus tirée à partir de ma base de données. Le div s'appelle"liste1"
Je souhaite affecter par drag and drop des individus dans plusieurs groupes. Je crée à cet effet 6 groupes auxquels j'affecte 6 div dénommées groupe1,groupe2...........groupe6.
div "liste1" :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 <div id = "liste1" draggable="true" style="background-color:#00FFFF;font-size: 10px;height: 550px;" /> <?php WHILE ($donnees = $reponse->fetch()) { <option value = "<?php echo $id{$i};?>" > <div id="groupes" draggable="true" ondragover="allowDrop(event)" ondragstart="drag(event)"> <?php echo $donnees['nom']." ".$donnees['prenom'];?> </div> </option> <?php }?><br></div>
mes div 'groupes'
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <div id = "groupe1" ondragover="allowDrop(event)"> <?php $reponse = $bdd->query('SELECT nomgroupe1 FROM groupes ORDER BY nomgroupe1'); WHILE ($donnees = $reponse->fetch()) { if ($donnees['nomgroupe1']!= ""){ echo $donnees['nomgroupe1'];echo'<br>'; } } ?> </div>
Dans mes div des groupe, j'écris les individus inscrits dans ma base de données.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); event.dataTransfer.effectAllowed = "copy"; } </script>
Lorsque je fais glisser un individu de ma liste dans la div groupe1 ou groupe2 ou groupe............ le lâcher déclenche une fenêtre de recherche dans mon navigateur à l'adresse http://www.groupes.com/
Là, je suis complètement perdu et ne comprends pas.
Je ne suis pas du tout expert en JS, mais j'arrive à peu près à comprendre les commandes et fonctions.
Quelqu'un peut-il m'aider s'il vous plait ?
Partager