UI Draggable et Droppable. Mon élément draggable passe sous mes éléments droppable.

Bonjour,

J'utilise une div draggable et des div droppable:

Voici mon code html:

Code:

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&eacute;poser ici</p>
</div>
<div id="groupe2" class="groupe">
	<p>D&eacute;poser ici</p>
</div>
<div id="groupe3" class="groupe">
	<p>D&eacute;poser ici</p>
</div>
</div>

Mon code en JS est le suivant:

Code:

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'));
	    }
	});
});

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?

Que faire?

Merci d'avance pour vos réponses.