Discussion :

[Catalyst]

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 :

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
 
$(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 ?

[danielhagnoul]

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.

[Catalyst]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Au final, voilà à quoi ressemble mon code:

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