1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Deplacement de plusieurs div [Résolu]

Signaler
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
 -
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
 -
Bonjour ,

voila j'essaie de faire une fonction qui
me permettra de deplacer plusieurs DIV. j'ai pris un code draganddrop qui me
permet de deplacer un et un seul DIV (ce qui marche) et je bidouille pour faire en sorte
que ca marche pour tous les DIV de ma page.
voici mon code javascript:

function mymove(aLayerPlage){

onmousedown=
ma_fonction(aLayerPlage);

}
function ma_fonction(aLayerPlage,e) {

if (ie)
{
window.lastX=event.clientX;

window.lastY=event.clientY;
onmousemove = doDrag(aLayerPlage);

onmouseup=endDrag;
}
}
function doDrag(aLayerPlage) {

if
(ie) {
var difX=event.clientX-window.lastX;
var
difY=event.clientY-window.lastY;
var newX1 =
parseInt(aLayerPlage.style.left)+difX;
var newY1 =
parseInt(aLayerPlage.style.top)+difY;
aLayerPlage.style.left=newX1+"px";

aLayerPlage.style.top=newY1+"px";
window.lastX=event.clientX;

window.lastY=event.clientY;
}
}
function endDrag(e) {

if (ie || ns4) {
document.onmousemove=null;
}
}

et dans la page HTML j'ai X DIV comme ci dessous:

BLABLA
(vide)
BRUNEL JEAN
MARC
Promotion


BLABLA BONJOUR
(vide)
DUJOUR
CLAUDE
Promotion


Merci d'avance de me sortir
de mon impasse
manu
Afficher la suite

15 réponses

Réponse 1 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
Bonjour,
>>c'est que le deplacement se fait sur le point du div en haut à gauche
oui top et left.
>>mon div est contenu dans deux autres div
donc mettre les fonctions du body sur l'un de ces div ( lequel ? ) ou
tenir compte de la position de ce(s) div ( offsetLeft et offsetTop de mémoire )
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 2 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
Bonjour,
déplacer ?
° toutes en même temps ou celle sur laquelle on clique d'abord ?
° en fonction de la position de la souris ?
si oui, un ch'tit exemple

<script type="text/javascript">
var deplace=false;
function mymove() {
if ( deplace )
{
deplace.style.top=event.clientY;
deplace.style.left=event.clientX;
}
}
</script>

BLABLA
(vide)
BRUNEL JEAN MARC
Promotion


BLABLA BONJOUR
(vide)
DUJOUR CLAUDE
Promotion


peu de choses à faire pour adapter avec le renard de feu.
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>

</FO></S< body>
Réponse 3 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
Merci de ta réponse rapide bultez,

j'ai mis en place ta solution et je comprends pas mes layers se deplace bien mais ya un decalage
de mon layer a chaque fois que je veux le deplacer en bas à droite.
je me suis dis qu'il fallait refaire le calcul comme je faisais avant, mais ca plante

voila le code :

function mymove() {
if ( deplace,e )
{
// deplace.style.top=event.clientY; ( ton code precedent est en commentaire)
// deplace.style.left=event.clientX;

var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;

var newX1 = parseInt(deplace.style.left)+difX;
var newY1 = parseInt(deplace.style.top)+difY;
deplace.style.left=newX1+"px";
deplace.style.top=newY1+"px";

window.lastX=event.clientX;
window.lastY=event.clientY;

}

}
merci de ton aide
manu
Réponse 4 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
si style="position:absolute... pas de raison à ce décalage.
pour l'erreur sur ton script, c'est quoi window.lastX ou lastY ?
je suppose que tu voulais des variables globales ?
et elles ne sont pas initialisées, si ?
=> en dehors de toute function var lastX=0,lastY=0;
et dans les function utiliser lastX et lastY.
mais inutile ce me semble ?
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 5 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
Oui en effet,
je suis desole je n'avais pas remarque le position absolute dans le div que tu as rajouté.
Cependant meme avec ca , j'ai un decalage !!!!!!!!!!
c bizzare
manu
Réponse 6 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
on peut voir le script ( enfin un petit bout d'extrait )
car , je viens de dire la même chose à quelqu'un d'autre
et je sais que c'est agaçant d'entendre ça : pas de raisons.
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 7 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
oui voici mon code javascript

<script type="text/javascript">
var deplace=false;
function mymove() {
if ( deplace )
{
deplace.style.top=event.clientY;
deplace.style.left=event.clientX;
}
}
</script>

le body:


et les div:

Droit Industriel
(vide)
BRUNEL JEAN MARC
Promotion
-

MANAGEMENT DU TOURISME
(vide)
DUJOUR CLAUDE
Promotion

manu
Réponse 8 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
je ne remarque aucun décalage ?
maintenant on peut jouer avec deplace.style.top=event.clientX+ ou - valeur; ???
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 9 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
je met dans le style du 1er div background-color:#FFFF00 et #FF8000 dans le 2ème
pour contrôler, et tout va bien.
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 10 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
j'ai mis des background-color:couleur pour contrôler et tout va bien
en fin pour moi
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 11 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
merci de tes reponses,
mais c vrai que c bizarre, chez moi ca se decale:
je de donne toute ma page(ya que le necessaire), j'ai peut etre zapper un truc,
car moi des que je clic j'ai le decalage:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<script type="text/javascript">
var deplace=false;
function mymove() {
if ( deplace )
{
deplace.style.top=event.clientY;
deplace.style.left=event.clientX;
}

}
</script></head>

BLABLA
(vide)
BRUNEL JEAN MARC
Promotion

BLABLA BONJOUR
(vide)
DUJOUR CLAUDE
Promotion


</form></html>

manu
Réponse 12 / 15
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
ben non, pas de décalage chez moi.
class="PLAGE" ? peut-être ? ( si le style existe ).
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>
Réponse 13 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
salut ,
Bon j'ai compris , alors an fait il y a deux choses.
La premiere , c'est que le deplacement se fait sur le point du div en haut à gauche, donc lorsque je prends mon div au milieu ou en bas a droite j'ai un petit decalage, mais bon ca marche bien :).

Le deuxieme point c'est que ce decalage s'emplifie car en fait mon div est contenu dans deux autres div ET C CA LE SOUCIS
en esperant que ca te parle:






Droit Industriel
(vide)
BRUNEL JEAN MARC
Promotion
-

MANAGEMENT DU TOURISME
(vide)
DUJOUR CLAUDE
Promotion



et voici les css
DIV.TIMETABLE {
height: 570px;
width: 800px;
background-color: #FFFFFF;
position: absolute;
top: 30px;
left: 0px;
border-style: none;
overflow: auto;
}
DIV.GRID .PLAGE {
display: block;
border-style: solid;
border-width: 1px;
border-color: #000000;
position: absolute;
padding: 0px 0px 0px 0px;
margin: 21px 0px 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
overflow: hidden;
cursor: pointer;
text-align: left;
vertical-align: top;
color: #000000;
background-color: #0099CC;
z-index: 20;
}

Merci d'avance
manu
Réponse 14 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
J'ai l'impression que j'ai pas de chance:

donc mettre les fonctions du body sur l'un de ces div ( lequel ? )
>> J'ai essayé de les mettre dans chacun des div parents, sans succes

tenir compte de la position de ce(s) div ( offsetLeft et offsetTop de mémoire )
>> oui je pense que ca doit etre ca , mais comment faire ?
ou doit je mettre les offset ?
merci

manu
Réponse 15 / 15
Messages postés
9
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
17 février 2006
re
Enfin !!!!!!!!
j'ai trouvé une soluce, c normal que je t'en fasse part.
C'est peut etre pas la meilleure solution.
En gros les autres DIV avait leur propre proprieteet donc j'avais un decalage.
Alors je repercute ce decalage dans mon calcul ce qui donne pour mon cas :

function mymove(e) {
if ( deplace )
{
deplace.style.top=event.clientY-80; //mes decalage neccessaire
deplace.style.left=event.clientX-190;

deplace.style.background = '#FFCF9C'; //des petites options en plus
deplace.style.color = '#000000';
deplace.style.zIndex = deplace.style.zIndex+i;
i=i+5;
}
}
Merci beaucoup a toi, bultez
manu
Répondre Posez votre question