Faire glisser les élements grace à JavaScript (draggable elements with JavaScript)
Ma petite fonction pour rendre un élément d'une page web "glissable".// fonction qui effectue le glisser
function doDrag(e) {
// deplacement depuis la derniere fois
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
// calcul des nouvelles coordonnees
var newX1 = parseInt(dragged_obj.style.left)+difX;
var newY1 = parseInt(dragged_obj.style.top)+difY;
// on applique les nouvelles coordonnees
dragged_obj.style.left=newX1+"px";
dragged_obj.style.top=newY1+"px";
// memorise la position
window.lastX=e.clientX;
window.lastY=e.clientY;
}
// cette fonction declenche le glissage
function beginDrag(e) {
e.preventDefault();
// memorise la position
window.lastX=e.clientX;
window.lastY=e.clientY;
// passe le bebe a doDrag qui va gerer le glissement
window.onmousemove=doDrag;
// lorsqu'on va relacher la souris, il faudra appeler endDrag
window.onmouseup=endDrag;
// nomme l'objet qui glisse
dragged_obj=this;
}
// fin de la glissade
function endDrag(e) {
window.onmousemove=null;
}
Enfin, pour rendre un élément de votre page glissable, il faut simplement écrire :
document.getElementById("ID").addEventListener("mousedown",beginDrag, false);
où ID est à remplacer par l'id de l'élément en question.
Ce Script a été testé avec :
- IE / Win
- Safari
- Firefox / Win
- Firefox / Mac
Tags : javascript DHTML
Commentaires
Ecrire votre commentaire
Vous devez vous connecter pour pouvoir ajouter un commentaire.
Il a l'air pas mal ce script mais la dernière ligne, où l'on appelle l'ID (document.getElementById("ID").addEventListener("mousedown",beginDrag, false);), il faut la mettre où ?