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

JavaScript Discussion :

Intervertir deux div


Sujet :

JavaScript

Vue hybride

Wookai Intervertir deux div 18/07/2006, 08h48
SpaceFrog sinon avec appendChild et... 18/07/2006, 09h08
Wookai Merci beaucoup, c'est... 18/07/2006, 09h28
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de Wookai
    Profil pro
    Étudiant
    Inscrit en
    Septembre 2004
    Messages
    307
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2004
    Messages : 307
    Par défaut Intervertir deux div
    Bonjour à tous !

    J'ai une liste d'éléments, de la forme suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="elements">
      <div id="element1">...</div>
      <div id="element2">...</div>
      <div id="element3">...</div>
      ...
    </div>
    J'aimerais pouvoir les intervertir deux à deux, à la demande de l'utilisateur (typiquement, ré-ordonner la liste). Je sais comment accéder à un div particulier
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var el2 = document.getElementById("element2");
    , comment en supprimer un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("elements").removeChild(el2);
    et comment en insérer un à la fin de la liste, mais je n'ai aucune idée de comment en insérer un à une position spécifique ou l'intervertir avec un autre ?

    Je pourrais faire différemment :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // intervertir element1 et element2
    var tmp = document.getElementById("element2").innerHTML;
    document.getElementById("element2").innerHTML = document.getElementById("element1").innterHTML;
    document.getElementById("element1").innterHTML = tmp;
    Mais je me demandais s'il n'y avait pas une meilleure technique...

    Merci d'avance !

    EDIT: De plus, après essai, la techique proposée ci-dessus ne fonctionne pas, car je perds tout le contenu ajouté dynamiquement (onclick, etc...).

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    sinon avec appendChild et insertBefore sans modifier les contenu, ce sont les divs complet qui bougeront ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé Avatar de Wookai
    Profil pro
    Étudiant
    Inscrit en
    Septembre 2004
    Messages
    307
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2004
    Messages : 307
    Par défaut
    Merci beaucoup, c'est exactemenet ce que je cherchais !

    Pour ceux que ça intéresserait, voici ma méthode (elle déplace id1 avant id2) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function moveBefore(id1, id2) {
    	var tmp = document.getElementsById(id1);
    	document.getElementsById("elements").removeChild(document.getElementsById(id1));
    	document.getElementsById("elements").insertBefore(tmp, document.getElementsById(id2));
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XHTML] Alignement de deux div
    Par Invité dans le forum Balisage (X)HTML et validation W3C
    Réponses: 14
    Dernier message: 29/06/2006, 21h03
  2. [css]superposer deux DIVs / opacity
    Par narkhor dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/03/2006, 02h38
  3. [Débutant] Aligner deux divs sur une ligne avec inline
    Par Braz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/03/2006, 10h52
  4. [css] Deux div ( et plus ) sur la meme ligne
    Par NeHuS dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 22/02/2006, 15h54
  5. [CSS] Utilisation de deux div avec float
    Par Ditch dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/10/2005, 15h48

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