Drag'n'drop

Evénement `mousedown`, `mouseup` & `mousemove`

Comme leur nom l'indique, mousedown, mouseup & mousemove correspondent respectivement aux événements "bouton de la souris enfoncé" (ou click, non relâché), "bouton de la souris (re)lâché", et "déplacement de la souris"; tous ces événements étant "écoutables" sur un ou plusieurs éléments d'une page.
On peut, par exemple, juste en récupérant en plus la position de la souris, permettre le déplacement d'un élément en combinant ce trois événements.
Un inconvénient de cette méthode est la vitesse de réaction/interaction, derrière onmousemove qui est géré directement par le navigateur.
Pour pouvoir jouer sur cette vitesse, il faudrait, par exemple, imposer une vitesse de rafraichissement plus importante avec, par exemple setInterval voir "Gestion du temps et animation en javascript", et un exemple d'utilisation dans un canvas: " Déplacement / animation d'un vecteur dans canvas".
L'inconvénient de cette méthode plus réactive est alors justemenent qu'on force le navigateur à tout (ou partie) réafficher, donc recalculer et ce très souvent (toutes les 50 ms dans l'exemple précédent, et même s'il ne se passe rien).

Exemple - Déplacement d'un élément cible

Le code complet de l'exemple suit directement l'exemple.

Etat de la souris:

Code html:

Etat de la souris:<span id="MouseState"></span>
<div id="MouseListen" 
     onmousedown="MouseDown();"
     onmouseup="MouseUp();"
     onmousemove="MouseMove(event);">
<span id="Target" onmousemove="TargetMouseMove(event);"></span>
<br></div>

Code css:

avec les quelques éléments décoratifs:


#MouseListen{border:1px solid black;padding:1em}
#Target {display:inline-block;
   background-color:red;
   width:.2em;height:.2em;
   border:2px solid black;border-radius:2em;
   padding:.5em}

Code javascript:

et enfin le javascript pour animer la cible (ou non), réagissant aux événements liés à la souris:

<script>
// Variable contenant l'état de la souris:
var MouseState=false;

function MouseDown() {
 MouseState=true;
 document.getElementById('MouseState').innerHTML="Mouse click Down...";
}
function MouseUp() {
 MouseState=false;
 document.getElementById('MouseState').innerHTML="Mouse click Up";
 var Tg=document.getElementById("Target");
 Tg.style.backgroundColor="red";
}

function MouseMove(event) {
 var x = event.clientX;x=x-50;
 var Tg=document.getElementById("Target");
 xx=Tg.style.marginLeft;
}

function TargetMouseMove(event) {
 var Tg=document.getElementById("Target");
 Tg.style.cursor="grabbing";
 if (MouseState) {
  document.getElementById('MouseState').innerHTML="Moving target...";
  Tg.style.backgroundColor="green";
  var x = event.clientX;x=x-50;
  Tg.style.marginLeft=x+"px";
 }
}
</script>