Also know as
Messages postés259Date d'inscriptionsamedi 13 décembre 2003StatutMembreDernière intervention22 novembre 2010
-
8 mars 2008 à 20:00
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 2011
-
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.
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 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)
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 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>
Also know as
Messages postés259Date d'inscriptionsamedi 13 décembre 2003StatutMembreDernière intervention22 novembre 20102 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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Also know as
Messages postés259Date d'inscriptionsamedi 13 décembre 2003StatutMembreDernière intervention22 novembre 20102 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 .... ?
Also know as
Messages postés259Date d'inscriptionsamedi 13 décembre 2003StatutMembreDernière intervention22 novembre 20102 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