Bonjour,
je cherche à créer un menu déplaçable en div. J'ai trouvé ce script (un peu modifié) :
Lorsque je souhaite supprimer le div créé par le code et que je le met en "dur" ça ne marche plus !
quelqu'un aurait une idée ?
Merci
je cherche à créer un menu déplaçable en div. J'ai trouvé ce script (un peu modifié) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
document.write("<div id='mon_div' style='position:absolute; width:160; top:30px; left:30px; background-color:#606060;'>CECI EST MON DIV</div>");
function start() {
// lance ma_fonction quand on appuie sur le bouton de la souris
document.getElementById("mon_div").addEventListener("mousedown",ma_fonction, false);
}
function ma_fonction(e) {
//Récupération de la position de la souris
window.lastX=e.clientX;
window.lastY=e.clientY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
window.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
window.onmouseup=endDrag;
}
// Déplacement des Divs-Layers
function doDrag(e) {
// Calcul de l'écart de position de la souris
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(document.getElementById("mon_div").style.left)+difX;
var newY1 = parseInt(document.getElementById("mon_div").style.top)+difY;
// Assignation des nouvelles coordonnées au div
document.getElementById("mon_div").style.left=newX1+"px";
document.getElementById("mon_div").style.top=newY1+"px";
//Assignation de l'anciènne position de la souris
window.lastX=e.clientX;
window.lastY=e.clientY;
}
function endDrag(e) {
window.onmousemove=null;
}
</script>
</head>
<body onload="start();">
</body>
</html>Lorsque je souhaite supprimer le div créé par le code et que je le met en "dur" ça ne marche plus !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function start() {
// lance ma_fonction quand on appuie sur le bouton de la souris
document.getElementById("menu").addEventListener("mousedown",ma_fonction, false);
}
function ma_fonction(e) {
//Récupération de la position de la souris
window.lastX=e.clientX;
window.lastY=e.clientY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
window.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
window.onmouseup=endDrag;
}
// Déplacement des Divs-Layers
function doDrag(e) {
// Calcul de l'écart de position de la souris
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(document.getElementById("menu").style.left)+difX;
var newY1 = parseInt(document.getElementById("menu").style.top)+difY;
// Assignation des nouvelles coordonnées au div
document.getElementById("menu").style.left=newX1+"px";
document.getElementById("menu").style.top=newY1+"px";
//Assignation de l'anciènne position de la souris
window.lastX=e.clientX;
window.lastY=e.clientY;
}
function endDrag(e) {
window.onmousemove=null;
}
</script>
<style type="text/css">
<!--
#menu {
color:#FFF;
background-color: #CCC;
position:absolute;
top:0px;
left:0px;
width:300px;
}
#barre {
background-color: #000;
top:0;
left:0;
width:100%;
height:20px;
}
-->
</style>
</head>
<body onload="start();">
<div id="menu">
<div id="barre">menu</div>
entrée 1<br />entrée 2<br />entrée 3
</div>
</body>
</html>
quelqu'un aurait une idée ?
Merci