par

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.

1 Réponse

+1 validé
par
 
Meilleure 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.

Lectures Informatique Recommandées

meilleurs livres informatique

Suggéré par Google

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...