Drag and drop ouvre une page
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:
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:
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> |
Code:
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> |
Dans mes div des groupe, j'écris les individus inscrits dans ma base de données.
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 ?
