deplacer des div dans une page

**reski** · 25/10/2006, 16h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci de m'aider

**reski** · 25/10/2006, 20h41

presonne n'a une idee

peu etre que vous connaissez un tuto ou que vous avez une piste
merci

**reski** · 26/10/2006, 13h19

je sais pas si ma question etait trop facile
mais peu etre quelcun de charitable pourrait m'eguiller
merci

**Matthieu2000** · 26/10/2006, 14h20

mets "mon_div" dans un paramètres....

**rib** · 28/10/2006, 14h04

tient tu peut regarder ici :http://tool-man.org/examples/, il y a une librairie et des examples d'utilisation du drag qi devrait resoudre ton probleme.

deplacer des div dans une page

JavaScript

Discussions similaires

Partager

Partager