Bonjour,
J'utilise une div draggable et des div droppable:
Voici mon code html:
Mon code en JS est le suivant:
Code : 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 <div id="liste" class="groupe"> <p>Liste des personnes</p> </div> <div id="personne1" class="draggable"> <p>Personne1</p> </div> <div id="groupe1" class="groupe"> <p>Déposer ici</p> </div> <div id="groupe2" class="groupe"> <p>Déposer ici</p> </div> <div id="groupe3" class="groupe"> <p>Déposer ici</p> </div> </div>
Voilà, mon problème est que mon élément draggable passe sous (en second plan) mes éléments droppables (sauf pour "liste"), que se passe-t-il?
Code : 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 $(function() { $(".draggable").draggable(); $("#groupe1").droppable({ accept:'.draggable', drop: function (event, ui){ $(this).find('p').html('Ok!'); alert(ui.draggable.attr('id')); var dragClone = $(ui.draggable).clone(); $(this).append(dragClone ); } }); $("#groupe2").droppable({ accept:'.draggable', drop: function (event, ui){ $(this).find('p').html('Ok!'); alert(ui.draggable.attr('id')); } }); $("#groupe3").droppable({ accept:'.draggable', drop: function (event, ui){ $(this).find('p').html('Ok!'); alert(ui.draggable.attr('id')); } }); $("#liste").droppable({ accept:'.draggable', tolerance: 'pointer', drop: function (event, ui){ $(this).find('p').html('Ok!'); alert(ui.draggable.attr('id')); } }); });
Que faire?
Merci d'avance pour vos réponses.
Partager