var ie = (document.all)? true:false; var ns4 = (document.layers)? true:false; var ns6 = (document.getElementById)? true:false; /* 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 : */ //Init des variables,des Divs-Layers, et du onmousedown var testToMove = false; var objDivMoveDivToClick; var objDivMoveDivToMove; function startMoveDiv(monDivToClick,monDivToMove) { objDivMoveDivToClick = monDivToClick; objDivMoveDivToMove = monDivToMove; //if (ie) { // lance ma_fonction quand on appuie sur le bouton de la souris ajoutEventOnElement(objDivMoveDivToClick,"onmousedown",fctMoveDiv); ajoutEventOnElement(objDivMoveDivToClick,"onmouseup",endDrag); ajoutEventOnElement(objDivMoveDivToClick,"onmousedown",initDrag); } /* else if (ns4) { // lance ma_fonction quand on appuie sur le bouton de la souris document.captureEvents(Event.MOUSEDOWN); document.onmousedown=fctMoveDiv; } else if (ns6) { // lance ma_fonction quand on appuie sur le bouton de la souris objDivMoveDivToClick.addEventListener("mousedown",fctMoveDiv, 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 fctMoveDiv(e) { //alert("Titi"); if (ie) { //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 //ajoutEventOnElement(objDivMoveDivToClick,"onmousedown",initDrag); ajoutEventOnElement(document,"onmousemove",doDrag); //document.onmousemove=doDrag; // lance endDrag quand on relache le bouton de la souris ajoutEventOnElement(document,"onmouseup",endDrag); //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; } } function initDrag() { testToMove = true; } /* 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) { if(testToMove == true) { //alert( objDivMoveDivToMove.id ); if (ie) { // 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(objDivMoveDivToMove.offsetLeft)+difX; var newY1 = parseInt(objDivMoveDivToMove.offsetTop)+difY; // Assignation des nouvelles coordonnées au div objDivMoveDivToMove.style.left=newX1+"px"; objDivMoveDivToMove.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(objDivMoveDivToMove.offsetLeft)+difX; var newY1 = parseInt(objDivMoveDivToMove.offsetTop)+difY; // Assignation des nouvelles coordonnées au div objDivMoveDivToMove.left=newX1; objDivMoveDivToMove.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(objDivMoveDivToMove.offsetLeft)+difX; var newY1 = parseInt(objDivMoveDivToMove.offsetTop)+difY; // Assignation des nouvelles coordonnées au div objDivMoveDivToMove.style.left=newX1+"px"; objDivMoveDivToMove.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) { testToMove = false; if (ie || ns4) { //Réinitialisation du onmousemove objDivMoveDivToClick.detachEvent('onmousemove',fctMoveDiv); } else if (ns6) { //Réinitialisation du onmousemove objDivMoveDivToClick.onmousemove=''; } }