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:

$(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... 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 ?
Modifié par Antonio (02 Feb 2012 - 14:36)

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:

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

Au final, voilà à quoi ressemble mon code:

$(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" });
        });