Div draggable et z-index

Bonjour,

J'ai 3 div déplaçables. J'aimerai que lorsque l'on en déplace une sur une autre, celle qui se déplace soit au premier plan systématiquement.

J'ai utilisé Jquery pour le code 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

$(function() {   $( "#date" ).draggable({ containment: "#map", scroll: false, handle: ".bouge", stack: "#date" });   $( "#choixindice" ).draggable({ containment: "#map", scroll: false, handle: ".bouge", stack: "#choixindice" });   $( "#legende" ).draggable({ containment: "#map", scroll: false, stack: "#legende" });   });

---

Le problème est que ça marche (avec stack)... mais au bout de la 3ème fois ! Je m'explique: il faut déplacer 3 fois une div avant qu'elle veuille bien passer un premier plan: les coups d'avant, elle se déplace derrière les autres. Et je n'ai aucune idée du pourquoi ce cet effet retardé.

Je précise qu'au départ (dans le CSS), les 3 div ont le même z-index.

Une idée pour que ça marche directement ?

Bonsoir

Sur la démonstration, l'option "stack" semble efficace (http://jqueryui.com/demos/draggable/#visual-feedback), mais je vois qu'elle s'applique à un groupe de divisions draggable. Il faudrait disposer de votre code (HTML, CSS, jQuery) pour faire un test réaliste.

Bon j'ai résolu mon problème, mais sans vraiment en comprendre la raison.

Au lieu d'affecter l'option "stack" à chaque élément séparément, je leur ai attribué une classe ("stack" pour être original :)) et j'ai rajouté la ligne suivante, tirée du code d'exemple de jquery ui:

Code:

---

1 2	$( ".stack" ).draggable({ stack: ".stack" });

---

Au final, voilà à quoi ressemble mon code:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$(function() { $( "#date" ).draggable({ containment: "#map", scroll: false, handle: ".bouge", }); $( "#choixindice" ).draggable({ containment: "#map", scroll: false, handle: ".bouge", }); $( "#legende" ).draggable({ containment: "#map", scroll: false, }); $( ".stack" ).draggable({ stack: ".stack" }); });

---