Monter et descendre un div [Résolu]

Signaler
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour à tous !


Voilà mon petit problème du jour... :


        <hr>

        id="image_0"name="image_0"type="file">

       


        <textarea id="etape_0"name="etape_0"></textarea>

       





        <hr>

       

       


        <textarea id="etape_1"name="etape_1"></textarea>

       





        <hr>

       

       


        <textarea id="etape_2"name="etape_2"></textarea>

       



J'aimerais pouvoir avec des boutons supplémentaire dans chaque div,
permettre de monter un des div ou bien de le descendre, mais pas en
PHP, du javascript, histoire d'éviter des appels au serveur pour rien
du tout...

Je suis sur que c'est possible mais je n'arrive pas à voir comment pour le moment.

Auriez-vous une idée ?


Merci par avance

10 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Je te propose une approche plus simple, qui a le mérite de gérer les bornes,
la
gestion se fait avec un tableau des positions de chaque DIVs, si tu en
ajoutes un dynamiquement il te suffit de l'ajouter en fin de T_Place
<html>
<head>
<style type= "text/css">
#D_01 {
  position : absolute;
  left : 10px; top : 10px;
  height :100px; width : 100px;
  border : 1px solid red;
  background-color : #ffcccc;
}
#D_02 {
  position : absolute;
  left : 10px; top : 175px;
  height :100px; width : 100px;
  border : 1px solid green;
  background-color : #ccffcc;
}
#D_03 {
  position : absolute;
  left : 10px; top : 340px;
  height :100px; width : 100px;
  border : 1px solid blue;
  background-color : #ccccff;
}
</style>
<script type="text/javascript">
//-- Declaration position initiale
var T_Place = new Array( 'D_01', 'D_02', 'D_03');
var IncX = 165;
//----------------------
function GetPlace( div_){
  var T_Pos = new Array();
  for( i = 0; i <T_Place.length; i++){
    if( div_ == T_Place[ i])
      return( i);
  }
  return( -1);
}
//----------------
function Replace(){
  for( i = 0; i <T_Place.length; i++){
    var Obj = document.getElementById(T_Place[ i]);
    Obj.style.top = 10 +(i *IncX) +"px";
  }
}
//--------------------
function Monter( div_){
  var Index = GetPlace( div_);
  if( Index > 0){
    T_Place[Index] = T_Place[Index -1];
    T_Place[Index -1] = div_;
  }
  Replace();
}
//-----------------------
function Descendre( div_){
  var Index = GetPlace( div_);
  if( Index > -1){
    if( Index < T_Place.length -1){
      T_Place[Index] = T_Place[Index +1];
      T_Place[Index +1] = div_;
    }
  }
  Replace();
}
</script>
</head>

  

  

  

  

  
  

</html>
voila pour le principe, je ne doute pas que tu n'y arrives...
;O)
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
35
Salut,

Je crois que si chacun de tes div est su un calque tu peut utiliser la propriétée ou methode : zIndex

Si t'a besoin d'aide, MP !!!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
- tout d'abord il faut identifier le DIV à mover grace à une ID
- le DIV doit être en position absolute
- ensuite lire sa position actuelle -> offsetTop ou offsetLeft
- augmenter ou réduire cette valeur
- réaffecter cette valeur à style.left ou style.top sans oublier l'unité px
exemple de code
<html>
<head>
<style type= "text/css">
#D_01 {
  position : absolute;
  left : 100px;
  top : 100px;
  height :100px;
  width : 100px;
  border : 1px solid red;
}
</style>
<script type="text/javascript">
//--------------------
function Monter( div_){
  var Obj = document.getElementById( div_);
  var Pos = Obj.offsetTop;
  Obj.style.top = Pos -10 +"px";
}
//-----------------------
function Descendre( div_){
  var Obj = document.getElementById( div_);
  var Pos = Obj.offsetTop;
  Obj.style.top = Pos +10 +"px";
}
</script>
</head>

Le DIV qui move...

</html>

...maintenant à toi de jouer...
;O)
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
Merci pour vos réponses !
Et justement j'avais bien peur que cela soit avec les absolute...

Mon problème que je n'ai pas dis dans ma question, c'est que je génère un div "à la volée"



        <hr>
        id="image_1"name="image_1"type="file">
       

        <textarea id="etape_1"name="etape_1"></textarea>
       


Ce code est générer à la volée à la suite avec du Javascript.
Me serait-il donc possible de continuer à générer à la volée tout en utilisant les absolute

Merci
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
Mince je peux toujours pas Editer...

Pour dire aussi que mon but "premier" étant de pouvoir permutter deux div.
Quand je clique sur "monter" je dois monter bien sur le div que j'ai mais aussi descendre le div qui était au dessus de lui.

Si tout est en ordre ca va, mais comment faire pour connaitre le div au dessus/dessous si j'ai déjà bougé plusieurs div auparavant .... ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
dans ce cas tu crées une fonction de swap
- tu récupères la position des 2 DIVs et tu les réaffectes en inversant

  var O_1 = document.getElementById( div1_);
  var O_2 = document.getElementById( div2_);
  var Pos_1 = O_1.offsetTop;
  var Pos_2 = O_2.offsetTop;

je te laisses imaginer la suite...
;O)
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
Merci pour tout !
Mais dans ce que tu viens de dires il y'a un petit problème

La fonction swap en fait je suis dessus depuis que j'ai répondu aux message, je me colle sur ce que tu m'a donné.

Et je t'avouerais que tu m'as réellement quasiment tout filé pour que je le fasse, mais comment connaitre justement, les deux divs à utiliser.

Bon y'en a un qui est facile à trouver c'est le div dans lequel on clique ^^
Mais l'autre

Le seul moyen que j'ai vu pour le moment serait de modifier la valeur du "OnClick" mais là ca devient vite le bordel...

Serait-il possible d'obtenir l'id de l'élément qui se trouve au dessus/dessous facilement

Si j'ai trois div, et si je veux faire monter tout en haut le troisième, le swap devra s'effectuer, bon ca pas difficile toujours avec le 3e div, mais comment savoir celui qui se trouve au dessus
C'est à dire le 2e, puis le 1er
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
il te suffit de lire les positions des tes n DIVs et de comparer leurs positions par rapport aux autres...
;O)
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
Alors là je t'avouerais que j'ai rien compris O_o....

Qu'est-ce que tu veux dire par "lire" ?

Une fonction qui test tous mes div jusqu'a ce qu'il trouve le bon ?

Je ne vois pas comment je vais pouvoir obtenir son id quand même...

Ouais désolé j'suis un peu paumé là ^^
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
Bon !
J'ai réussi grace à toi

Voici une solution qui fonctionne, maitenant j'ai plus qu'a l'adapté avec des ajouts dynamique O_o...

<html>
<head>
<style type="text/css">
#D_01 {
  position : absolute;
  left : 10px;
  top : 10px;
  height :100px;
  width : 100px;
}
#D_02 {
  position : absolute;
  left : 10px;
  top : 175px;
  height :100px;
  width : 100px;
}
#D_03 {
  position : absolute;
  left : 10px;
  top : 340px;
  height :100px;
  width : 100px;
}
</style>
<script type="text/javascript">
function swap(div_, position, action)
{
    for (i=1; i<=3; i++)
    {
        if (document.getElementById("D_0"+i).offsetTop == position && div_ != "D_0"+i)
            result = "D_0"+i;
    }
    if (action == 1)
        Monter(result);
    else
        Descendre(result);
}
//--------------------
function Monter(div_, do_swap)
{
    var Obj = document.getElementById(div_);
    var Pos = Obj.offsetTop;
    Obj.style.top = Pos - 165 +"px";
    if (do_swap == 1)
        swap(div_, Pos - 165, 2);
}
//-----------------------
function Descendre(div_, do_swap)
{
    var Obj = document.getElementById(div_);
    var Pos = Obj.offsetTop;
    Obj.style.top = Pos + 165 +"px";
    if (do_swap == 1)
        swap(div_, Pos + 165, 1);
}
</script>
</head>

   

        <hr>

        <textarea id="etape_0" name="etape_0"></textarea>
       
       

       
   

   

        <hr>

        <textarea id="etape_1" name="etape_1"></textarea>
       
       

       
   

   

        <hr>

        <textarea id="etape_2" name="etape_2"></textarea>
       
       

       
   

</html>

Merci beaucoup en tout cas !

@+