Monter et descendre un div [Résolu]

Also know as 269 Messages postés samedi 13 décembre 2003Date d'inscription 22 novembre 2010 Dernière intervention - 8 mars 2008 à 20:00 - Dernière réponse : PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention
- 9 mars 2008 à 17:32
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
Afficher la suite 

10 réponses

Répondre au sujet
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2008 à 17:32
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
nicomilville 3498 Messages postés lundi 16 juillet 2007Date d'inscription 28 février 2014 Dernière intervention - 9 mars 2008 à 08:56
0
Utile
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 !!!
Commenter la réponse de nicomilville
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2008 à 10:47
0
Utile
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)
Commenter la réponse de PetoleTeam
Also know as 269 Messages postés samedi 13 décembre 2003Date d'inscription 22 novembre 2010 Dernière intervention - 9 mars 2008 à 10:56
0
Utile
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
Commenter la réponse de Also know as
Also know as 269 Messages postés samedi 13 décembre 2003Date d'inscription 22 novembre 2010 Dernière intervention - 9 mars 2008 à 11:05
0
Utile
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 .... ?
Commenter la réponse de Also know as
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2008 à 11:18
0
Utile
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)
Commenter la réponse de PetoleTeam
Also know as 269 Messages postés samedi 13 décembre 2003Date d'inscription 22 novembre 2010 Dernière intervention - 9 mars 2008 à 11:33
0
Utile
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
Commenter la réponse de Also know as
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 9 mars 2008 à 11:43
0
Utile
il te suffit de lire les positions des tes n DIVs et de comparer leurs positions par rapport aux autres...
;O)
Commenter la réponse de PetoleTeam
Also know as 269 Messages postés samedi 13 décembre 2003Date d'inscription 22 novembre 2010 Dernière intervention - 9 mars 2008 à 11:51
0
Utile
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à ^^
Commenter la réponse de Also know as
Also know as 269 Messages postés samedi 13 décembre 2003Date d'inscription 22 novembre 2010 Dernière intervention - 9 mars 2008 à 12:53
0
Utile
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 !

@+
Commenter la réponse de Also know as

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.