Discussion :

[remrem59]

Bonjour à tous

Voilà mon petit problème : je génère des "modal box" celles-ci sont draggable, resizable et il peut y avoir plusieurs box affichées en même temps. Je joue avec le mouseout / mouseover pour modifier les zindex des box pour mettre au premier plan les box qui se chevauchent, mais lors du draggable, en déplaçant trop vite la box, celle-ci passe sous les autres ...
J'ai essayé plein de choses en jouant sur scrollSpeed, scrollSensitivity, stack mais rien n'y fait.
j'ai aussi tenté de mettre un div (width:100%;height:100%;position:fixed) avec un zindex compris entre la box qui bouge et les box "inactive" ...

Merci pour votre aide

les box sont en position:absolute;

voilà le bout de code concernés :

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
$(".z10").live("mouseover", function() {
		$(this).css({
				opacity:"1",
				zIndex:2500
			}).draggable({
				handle:'.sz105',
				//containment:'document',
				scrollSensitivity: 1,
				scrollSpeed: 1,
				zIndex:2600,
				start: function() {
					//$('#voilenoar').show();
				},
				drag: function() {
				},
				stop: function() {
					//$('#voilenoar').hide();
				}
			}).resizable({
				maxHeight:400,
				maxWidth:600,
				minHeight:230,
				minWidth:300
			});
	}).live("mouseout", function(){
		$(this).css({
			opacity:"0.8",
			zIndex:2000
		});
	});

[remrem59]

J'ai réglé le problème tout seul comme un grand, comme quoi, la nuit porte conseil

je poste la méthode (en gros) au cas ou ça peut aider ...
J'ai joué avec les class des autres "modal box" pendant le draggable start / stop.
start : il suffit de retirer la classe z10 (dans mon code) et d'ajouter une classe z11 avec les spécifications css (absolute,zindex, top, left).
stop : retirer la classe z11 et ajouter la z10 et voilà