 |
Publicité 
|
Avouez que ce serait bien que vous puissiez avoir sur votre site une fenêtre sur laquelle on pourrait faire un 'drag & drop' ...
C'est un peu compliqué à réaliser car la programmation n'est pas la même pour Internet Explorer, pour Netscape 4.x et pour Netscape 6, mais c'est faisable. Voilà comment :
Nous allons donc avoir 2 choses :
- 1 Div à faire bouger, que l'on déclare comme cela (dans le BODY) :
<script language="JavaScript">
var ie = (document.all)? true:false;
var ns4 = (document.layers)? true:false;
var ns6 = (document.getElementById)? true:false;
if ((ns6) || (ie)) {
document.write("<div id='mon_div' style='position:absolute; width:160; top:30; left:0; background-color:#606060;'>CECI EST MON DIV</div>");
} else if (ns4) {
document.write("<layer id='mon_div' width=160 top=30 left=0 bgcolor='#606060'>CECI EST MON DIV</layer>");
}
</script>
- et une souris...
Pour faire bouger le div avec la souris, il nous faut récupérer l'évènement 'appuyer sur le bouton de la souris' sur le div, puis l'évènement du 'déplacement de la souris pendant que le bouton est enfoncé', et enfin l'évènement 'relacher le bouton de la souris'.
Pour cela, on utilise :
onmousedown : appuyer sur le bouton de la souris
onmousemove : déplacement de la souris
onmouseup : relacher le bouton de la souris
Voici, dans la fonction start, comment s'utilise le onmousedown :
Cette fonction doit être exécutée en premier, on pensera donc à mettre : <body onload="start()">
//Init des variables,des Divs-Layers, et du onmousedown
function start() {
// lance ma_fonction quand on appuie sur le bouton de la souris
mon_div.onmousedown= ma_fonction;
}else if (ns4) {
// lance ma_fonction quand on appuie sur le bouton de la souris
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=ma_fonction;
}else if (ns6) {
// lance ma_fonction quand on appuie sur le bouton de la souris
document.getElementById("mon_div").addEventListener("mousedown",ma_fonction, false);
}
}
C'est somme toute assez simple. La fonction attend maintenant que l'évenement se réalise. Notez quand même que sous Ns6 on est obligé de créer une liste d'évenement avec 'addEventListener' pour ensuite indiquer la fonction à éxécuter lors de l'évenement
Donc, voyons maintenant ce qui se passe quand nous cliquons sur le bouton de la souris :
// Paramétrage du déplacement des Divs-Layers et des onmousemove & onmouseup pendant le onmousedown
// le (e) indique au programme qu'il utilise les évenements.
function ma_fonction(e) {
//Récupération de la position de la souris
window.lastX=event.clientX;
window.lastY=event.clientY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
document.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
document.onmouseup=endDrag;
}else if (ns4) {
//Récupération de la position de la souris
window.lastX=e.pageX;
window.lastY=e.pageY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
document.captureEvents(Event.MOUSEUP)
document.onmouseup=endDrag;
}else if (ns6) {
//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;
}
}
Le programme sait donc maintenant ce qu'il doit faire pour chaque évenement.
Maintenant, il ne nous reste plus qu'à paramétrer le déplacement du div :
// Déplacement des Divs-Layers
function doDrag(e) {
// Calcul de l'écart de position de la souris
var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(mon_div.style.left)+difX;
var newY1 = parseInt(mon_div.style.top)+difY;
// Assignation des nouvelles coordonnées au div
mon_div.style.left=newX1+"px";
mon_div.style.top=newY1+"px";
//Assignation de l'anciènne position de la souris
window.lastX=event.clientX;
window.lastY=event.clientY;
}else if (ns4) {
// Calcul de l'écart de position de la souris
var difX=e.pageX-window.lastX;
var difY=e.pageY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(document.layers.mon_div.left)+difX;
var newY1 = parseInt(document.layers.mon_div.top)+difY;
// Assignation des nouvelles coordonnées au div
document.layers.mon_div.left=newX1;
document.layers.mon_div.top=newY1;
//Assignation de l'anciènne position de la souris
window.lastX=e.pageX;
window.lastY=e.pageY;
}else if (ns6) {
// 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;
}
}
Et pour finir, voici la fonction qui traite le relachement du bouton :
function endDrag(e) {
//Réinitialisation du onmousemove
document.onmousemove=null;
}else if (ns6) {
//Réinitialisation du onmousemove
window.onmousemove=null;
}
}
A vous maintenant de reprendre tout ces éléments et de les personnaliser afin d'agrémenter un peu plus votre site ...
Une fenêtre sur le même principe et plus élaboré est disponible en download dans la logithèque : 'Déplacer un Div avec la Souris'.
|
