Monter et descendre un div
Résolu
Also know as
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
-
8 mars 2008 à 20:00
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 9 mars 2008 à 17:32
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 9 mars 2008 à 17:32
A voir également:
- Css descendre un élément
- Exemple de page d'accueil html et css ✓ - Forum Graphisme/design
- Ajouter un element dans un tableau java - Forum Java
- AJout de ligne dans un tableau en fonction de la saisie ✓ - Forum Java
- Inserer et supprimer des elemnts dans un tableau - Forum Java
- Css div - Forum Javascript / DHTML
10 réponses
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
9 mars 2008 à 17:32
9 mars 2008 à 17:32
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)
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)
nicomilville
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
36
9 mars 2008 à 08:56
9 mars 2008 à 08:56
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 !!!
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 !!!
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
9 mars 2008 à 10:47
9 mars 2008 à 10:47
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)
- 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)
Also know as
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
9 mars 2008 à 10:56
9 mars 2008 à 10:56
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Also know as
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
9 mars 2008 à 11:05
9 mars 2008 à 11:05
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 .... ?
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 .... ?
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
9 mars 2008 à 11:18
9 mars 2008 à 11: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)
- 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)
Also know as
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
9 mars 2008 à 11:33
9 mars 2008 à 11:33
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
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
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
9 mars 2008 à 11:43
9 mars 2008 à 11:43
il te suffit de lire les positions des tes n DIVs et de comparer leurs positions par rapport aux autres...
;O)
;O)
Also know as
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
9 mars 2008 à 11:51
9 mars 2008 à 11:51
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à ^^
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à ^^
Also know as
Messages postés
259
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
22 novembre 2010
2
9 mars 2008 à 12:53
9 mars 2008 à 12:53
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 !
@+
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 !
@+
