Sites


Initiation à javascript

Déplacer un élément dans la page

Déplacer un élément dans la page devrait normalement pouvoir être réalisé en HTML5 avec l'attribut Drag. Il se trouve cependant que celui-ci n'est pas encore implémenté complétement dans la plupart des navigateurs et que l'utilisation du Javascript reste nécessaire dans tous les cas de figure.

Partons du code HTML suivant avec le CSS qui permettra de mieux voir le résultat. Remarquons que nous accédons à l'objet à déplacer par son identifiant square et que le CSS définit une position de type absolute, mais relative fonctionnerait aussi. Cependant, cet attribut sera nécessaire.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"  />
<title>Déplacer un élément à la souris</title>

<style>

#square
{
  position:absolute;
  height:100px;
  width:100px;
  background-color:red;
}

</style>
</head>
<body>
  <div id="square" onmousedown="on_mouse_down_square(event)"></div>
</body>
</html>

var mouse_down = false;

function on_mouse_down_square(event) {
 mouse_down=true;
}

function on_mouse_up(event){
 mouse_down=false;
}

document.onmousemove = on_mouse_move;

document.onmouseup = on_mouse_up;

function on_mouse_move(event) {
  if (mouse_down === true) {
    document.querySelector('#square').style.left = event.clientX-50+'px';
    document.querySelector('#square').style.top = event.clientY-50+'px';

  }
}

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.