• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2013

Les coordonnées des blocs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

On a vu comment connaître la position de la souris mais non la position (initiale) d'un élément.
Dans la plupart des cas, il faut effectuer un décalage vers la gauche et le haut, donc enlever (soustraire) aux coordonnées de la souris une certaine valeur.

On peut procéder par tâtonnement. Par exemple pour décaler de 100 et 60 pixels :

element.style.left = x - 100 + 'px';
element.style.top = y - 60 + 'px';

Mais ça serait mieux avec des valeurs exactes.

Image utilisateur

À la fin de ce tutoriel, on saura comment centrer un bloc au-dessus de la souris et comment conserver le décalage initial entre la souris et nos "fenêtres".

Centrer

On veut centrer le bloc autour de la souris lors du déplacement.

Il faut donc connaître la largeur et hauteur du bloc pour les diviser par 2 et obtenir le décalage permettant de centrer le bloc.

Citation

Cool, et bah on a juste à utiliser style.width et style.heigth. :-°

Non! J'ai une meilleure méthode à vous proposer !

Premièrement, si on s'appuie sur le style CSS, on n'est pas sûr qu'il s'agisse de la bonne largeur (elle peut ne pas être définie ou le texte peut déborder). Il vaut mieux utiliser les propriétés offsetWidth et offsetHeight.

Je vous laisse modifier le code de notre script de fenêtre pour que le bloc reste centré :

x -= dragged.offsetWidth / 2; //On décale vers la gauche, donc -
y -= dragged.offsetHeight / 2;

Tester cet exemple : la souris reste au centre de la fenêtre

Coordonnées

Comment connaître la position initiale d'un bloc ? On pourrait utiliser .style.top et .style.left mais si je vous en parle, c'est qu'il y a forcément mieux. :-°

On va utiliser offsetLeft et offsetTop qui nous donnent les coordonnées x et y d'un élément HTML par rapport à son conteneur (offsetParent).
Là où ça se complique, c'est que le conteneur lui-même possède des propriétés offsetLeft et offsetTop par rapport à un autre conteneur ! :p

Image utilisateur

Il faut donc tout additionner en remontant de conteneur en conteneur jusqu'à arriver à la page entière elle-même.

var elementX = 0;
var elementY = 0;
var element = objet;
while(element)
{
  //On rajoute des coordonnées
  elementX += element.offsetLeft;
  elementY += element.offsetTop;
  element = element.offsetParent;
}

En réalité, on va s'arrêter dans la boucle dès que l'on trouve un premier élément en position absolue.

do //On utilise un do-while au lieu d'un while car la cible elle-même est en position absolue (vu qu'on va la déplacer)
{
  //On rajoute des coordonnées
  elementX += element.offsetLeft;
  elementY += element.offsetTop;
  element = element.offsetParent;
}while(element && element.style.position != 'absolute');

Fil rouge : décalage initial

Maintenant que l'on possède les coordonnées, on peut connaître le décalage initial qui existe entre la souris et le bloc lui-même. Décalage qu'il va falloir conserver au cours du déplacement :

Image utilisateur

Pas besoin de plus d'explications je pense, vous pouvez essayer par vous-mêmes (ou... si vous êtes paresseux, regarder directement comment faire :-° ).

Correction

Ce décalage, on le calcule au départ (fonction start_drag) et on le stocke dans deux variables (dX et dY).
On le réapplique ensuite lors du déplacement.

//Partie du code ayant changé
var dX, dY;

function start_drag(objet,event)
{
  dragged = objet;

  event.returnValue = false;
  if( event.preventDefault ) event.preventDefault();
        
  //Coordonnées de la souris
  var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
        

  //Coordonnées de l'élément
  var eX = 0;
  var eY = 0;
  var element = objet;
  do
  {
    eX += element.offsetLeft;
    eY += element.offsetTop;
    element = element.offsetParent;
  } while( element && element.style.position != 'absolute');

  //Calcul du décallage
  dX = x - eX;
  dY = y - eY;

}

function drag_onmousemove(event) 
{
  if( dragged ) 
  {
    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                
    //On applique le décalage
    x -= dX;
    y -= dY;

    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}

Notre petite fenêtre en cours de déplacement :magicien:

On sait récupérer les coordonnées de la souris, des éléments, leur décalage. À partir de là, on peut imaginer plein d'applications. :) Il faut surtout un peu d'imagination et... parfois un peu de mathématiques !
Mais comme vous avez pu le voir, la plupart du temps, c'est surtout des additions, soustractions, multiplications et divisions. :-°

Exemple de certificat de réussite
Exemple de certificat de réussite