Comment déplacer un div HTML avec la souris en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-09-20 12:35:14

Question

Bonjour, je voudrais déplacer un div HTML avec la souris. Il faudrait qu'on puisse cliquer sur le div pour ensuite le déplacer sans pour autant qu'il puisse sortir de la fenêtre. J'aimerai également que le div reste fixe lorsqu'on défile la page. Merci.

Réponse

Pour déplacer une balise <div> HTML avec la souris, en JavaScript, vous devez entre autre effectuer les opérations suivantes :

Utiliser l'interface MouseEvent pour détecter les évènements liés au pointeur de la souris.
Récupérer les coordonnées du pointeur avec les propriétés clientX et clientY.
Récupérer la taille du viewport avec les propriétés clientWidth et clientHeight.

Voici comment déplacer un div HTML avec la souris en JavaScript :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment déplacer un div HTML avec la souris en JavaScript ?</title>
<style>
#laDiv {
  position: absolute;
  z-index: 1000;
  border: 1px solid #000;
}

#laDiv_titre {
  padding: 10px;
  cursor: move;
  text-align: center;
  z-index: 1001;
  background-color: #CCC;
  color: #000;
}

#laDiv_contenu {
  padding: 10px;
  z-index: 1001;
  background-color: #DDD;
  color: #000;
}
</style>
</head>
<body>

<div id="laDiv">
  <div id="laDiv_titre">Titre</div>
  <div id="laDiv_contenu">Contenu</div>
</div>

<script>
function deplacerDiv(id) {
  var pos1 = pos2 = pos3 = pos4 = 0;
  if (document.getElementById("laDiv_titre")) {
    document.getElementById("laDiv_titre").onmousedown = relacherSouris;
  } else {
    id.onmousedown = relacherSouris;
  }

  function relacherSouris(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = arretDeplacement;
    document.onmousemove = debutDeplacement;
  }

  function debutDeplacement(e) {
    e = e || window.event;
    e.preventDefault();
var winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight;
maxX = winW - id.offsetWidth - 1,
maxY = winH - id.offsetHeight - 1;
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    if ((id.offsetTop - pos2) <= maxY && (id.offsetTop - pos2) >= 0) {
       id.style.top = (id.offsetTop - pos2) + "px";
    }
    if ((id.offsetLeft - pos1) <= maxX && (id.offsetLeft - pos1) >= 0) {
       id.style.left = (id.offsetLeft - pos1) + "px";
    }
  }

  function arretDeplacement() {
    document.onmouseup = null;
    document.onmousemove = null;
id.style.position = "fixed";
  }
}
deplacerDiv(document.getElementById("laDiv"));
</script>
</body>
</html>

Remarque : Vous noterez la ligne id.style.position = "fixed"; dans la fonction arretDeplacement() ; elle permet de fixer la balise <div> lors du scroll de la fenêtre.