IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Div draggable et z-index


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 25
    Par défaut 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 : 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 ?

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    25
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 25
    Par défaut
    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" });
            });

Discussions similaires

  1. Remplir un Div avec des informations indexées
    Par Janko dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 08/09/2011, 00h55
  2. Réponses: 2
    Dernier message: 03/03/2010, 14h53
  3. DIV IE FF z-index
    Par Alex35 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 13/08/2008, 14h13
  4. [AJAX] Bug IE : ma div draggable ne suit pas mon scroll horizontal
    Par kazai dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/06/2008, 09h59
  5. zindex div draggable
    Par calitom dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/03/2007, 13h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo