deplacement de plusieurs divRésolu

Question

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

cs_bultez · Accepted Answer

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 ~

cs_bultez · Answer

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 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 ~

pegasus77 · Answer

Merci de ta r&#233;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 &#224; 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

cs_bultez · Answer

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 ~

pegasus77 · Answer

Oui en effet,
je suis desole je n'avais pas remarque le position absolute dans le div que tu as rajout&#233;.
Cependant meme avec ca , j'ai un decalage !!!!!!!!!!
c bizzare
manu

cs_bultez · Answer

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 ~

pegasus77 · Answer

oui voici mon code javascript le body: et les div: Droit Industriel (vide) BRUNEL JEAN MARC Promotion - MANAGEMENT DU TOURISME (vide) DUJOUR CLAUDE Promotion manu

cs_bultez · Answer

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 ~

cs_bultez · Answer

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 ~

cs_bultez · Answer

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 ~

pegasus77 · Answer

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: BLABLA (vide) BRUNEL JEAN MARC Promotion BLABLA BONJOUR (vide) DUJOUR CLAUDE Promotion manu

cs_bultez · Answer

ben non, pas de décalage chez moi. class="PLAGE" ? peut-être ? ( si le style existe ). Cordialement. Bul. ~ Mon Site qu'il est à Moi ~

pegasus77 · Answer

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 &#224; 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

pegasus77 · Answer

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&#233; de les mettre dans chacun des div parents,  sans succes

tenir compte de la position de ce(s) div ( offsetLeft et offsetTop de m&#233;moire )
>> oui je pense que ca doit etre ca , mais comment faire ?
ou doit je mettre les offset ?
merci

manu

pegasus77 · Answer

re 
Enfin !!!!!!!!
j'ai trouv&#233; 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

Deplacement de plusieurs div

15 réponses

Votre réponse