deplacer des div dans une page
bonjour a tous,
j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter
je voudrais faire apparaitre des div puis les deplacer dans une page
chacun pouvant etre deplacer separement
voila ce que j'ai trouver
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
|
//Init des variables,des Divs-Layers, et du onmousedown
function start() {
if (ie) {
// 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); }
}
// 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.
// 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) {
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
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; }
}
// Déplacement des Divs-Layers
function doDrag(e) {
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(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; }
}
function endDrag(e) {
if (ie || ns4) {
//Réinitialisation du onmousemove
document.onmousemove=null; }else if (ns6) {
//Réinitialisation du onmousemove
window.onmousemove=null; }
} |
ca fonctionne tres bien pour un seul div mais comment faire pour en deplacer plusieurs
si je comprennais ce que fait ce script ca serrait sans doute facile mais je suis un peu perdu :lol:
merci de m'aider