Discussion :

[marjan]

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>

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>

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 ?

[NoSmoking]

Bonjour,
merci de mettre le code HTML généré, CTRL + U, que l'on puisse éventuellement tester.

Je dirais comme cela qu'il manque un event.stopPropagation() quelque part .