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 :

[DOM] déplacer un élément


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Mars 2007
    Messages
    140
    Détails du profil
    Informations forums :
    Inscription : Mars 2007
    Messages : 140
    Par défaut [DOM] déplacer un élément
    Bonsoir,

    j' aimerai déplacer (cad faire passer un élément par exmple d div2 à div1) un élèment de sa position à une autre . juste en cliquant (sélectionnant l 'élément) sur l 'élément que l 'on souhaite déplacé puis ensuite sur une image
    En fait , j' ai ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    <img src="images/fleche_up.gif" alt="fléche" /><img src="images/fleche_down.gif" alt="fléche" />
    <div id="div1">
       contenu div1
    </div>
    <div id="div2">
       contenu div2
    </div>
    <div id="div3">
        contenu div3
    </div>
    <div id="div4">
       contenu div4
    </div>
    comment pourrai je faire ça?
    une suggestion.
    merci d' avance.

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    tu souhaites modifier l'ordre des éléments ou faire du déplacement ?

  3. #3
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Salut,

    Utilise le DOM pour cela: regarde les méthodes appendChild et removeChild.
    Sur le clic tu peux enregistrer la référence à l'élément sélectionné, et sur le clic du bouton tu fait ton déplacement à l'aide des fonctions du DOM.

    ERE

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    emmanuel.remy s'il s'agit de faire du déplacement d'ordre, un simple insertBefore suffit , pas besoins de recréer l'objet ... :-)

  5. #5
    Membre confirmé
    Inscrit en
    Mars 2007
    Messages
    140
    Détails du profil
    Informations forums :
    Inscription : Mars 2007
    Messages : 140
    Par défaut
    Bonjour,
    je souhaite modifier l' ordre des éléments.
    je me penche sur les fonctions dom.

    merci

  6. #6
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    voila :

    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
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<style type="text/css">
    			.selected{
    				border:1px solid red;
    			}
    			.unselected{
    				border:none;
    			}
    		</style>
    		<script type="text/javascript">
    			var current = null;
     
    			//*************************** nétoie les noeuds vide !!
    			var notWhitespace = /\S/;
     
    			var TEXT_NODE;
    			try {
    			   TEXT_NODE = Node.TEXT_NODE;
    			} catch(e) {
    			   TEXT_NODE = 3;
    			}
     
    			var ELEMENT_NODE;
    			try {
    			  ELEMENT_NODE = Node.ELEMENT_NODE;
    			} catch(e) {
    			   ELEMENT_NODE = 1;
    			} 
    			function cleanWhitespace(node) {
    			  for (var x = 0; x < node.childNodes.length; x++) {
    			    var childNode = node.childNodes[x];
    			    if ((childNode.nodeType == TEXT_NODE)&&(!notWhitespace.test(childNode.nodeValue))) {
    			      node.removeChild(node.childNodes[x]);
    			      x--;
    			    }
    			    if (childNode.nodeType == ELEMENT_NODE) {
    			      cleanWhitespace(childNode);
    			    }
    			  }
    			} 
    			//*********************** fin de la méthode de nétoyage
     
     
    			function selectElement(element){
    				for(var i = 0 , l = element.parentNode.getElementsByTagName('div').length; i < l;i++){
    					element.parentNode.getElementsByTagName('div')[i].className = 'unselected';
    				}
    				element.className = 'selected';
    				current = element ;
    			}
     
    			function monter(){
    				var parent = current.parentNode;
    				var precedant = current.previousSibling;
    				parent.insertBefore(current, precedant);
    			}
    			function descendre(){
    				var parent = current.parentNode;
    				var suivant = current.nextSibling;
    				parent.insertBefore(current, suivant.nextSibling);
    			}
    		</script>
    	</head>
    	<body>
    		click sur un élément pour le selectionner puis click sur un des boutons :) <br />
     
    <input type="button" value="monter" onclick="monter()" >
    <input type="button" value="suivant" onclick="descendre()" >
    <div id="conteneur">
    	<div id="div1" onclick="selectElement(this)">
    	   contenu div1
    	</div>
    	<div id="div2" onclick="selectElement(this)">
    	   contenu div2
    	</div>
    	<div id="div3" onclick="selectElement(this)">
    	    contenu div3
    	</div>
    	<div id="div4" onclick="selectElement(this)">
    	   contenu div4
    	</div>
    </div>
    <script type="text/javascript">
    	cleanWhitespace(document.getElementById('conteneur'));
    </script>		
    	</body>
    </html>

  7. #7
    Membre confirmé
    Inscrit en
    Mars 2007
    Messages
    140
    Détails du profil
    Informations forums :
    Inscription : Mars 2007
    Messages : 140
    Par défaut
    Bonjour,
    merci beaucoup pour ce code ,
    ça marche.

Discussions similaires

  1. Déplacer des éléments du DOM
    Par cestymour dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/06/2014, 14h24
  2. Déplacer un élément dans le dom
    Par flo314 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/02/2011, 20h21
  3. [DOM] Déplacer un élèment dans l'arbre HTML
    Par Tchupacabra dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/08/2007, 19h28
  4. Comment déplacer un élément de dessin
    Par stof dans le forum MFC
    Réponses: 2
    Dernier message: 20/04/2005, 14h03
  5. déplacer un élément d'une table
    Par Sph@x dans le forum Requêtes
    Réponses: 3
    Dernier message: 10/02/2004, 12h12

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