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.
