Voilà, j'ai suivi le thread "Comment redimensionner div" du forum HTML & co
et je me suis mis à essayer de faire un div pouvant faire ça parceque c'étais marrant et que j'avais que ça à faire
Mais j'ai un bug
En gros, j'arrive pas à gérer les redimenssionnements du div !
le problème : je veux faire un elem.style.width = elem.style.width + qqch
mais elem.style.width ne peut que être assigné et pas utilisé, donc j'ai utilisé offsetWidth à la place, mais j'ai l'impression que ça fait tout merder...
Le code :
Code HTML/JavaScript : 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149 <html> <head> <style type="text/css"> div{ border:1px solid black; position:absolute; left:100px; width:100px; top:100px; height:100px; } div:hover{ cursor:move; } </style> <script> var xinit; // position de la souris au clic sur le div var yinit; var x; // position de l'élément au départ var y; var initier = false; // si on est en train de cliquer var gauche = false; // si on a cliqué sur un bord gauche var droite = false; // si on a cliqué sur un bord droit var haut = false; // si on a cliqué sur un bord haut var bas = false; // si on a cliqué sur un bord bas function init(e){ initier = true; xtmp = document.getElementById('dim').offsetLeft; ytmp = document.getElementById('dim').offsetTop; x = document.getElementById('dim').offsetLeft; y = document.getElementById('dim').offsetTop; xinit = e.clientX; yinit = e.clientY; // on test la position de la souris if(e.clientX >= xtmp && e.clientX <= xtmp+2){ gauche = true; if(e.clientY >= ytmp && e.clientY <= ytmp+2){ haut = true; } else if(e.clientY >= ytmp + document.getElementById('dim').offsetHeight-2 && e.clientY <= ytmp + document.getElementById('dim').offsetHeight){ bas = true; } } else if(e.clientX >= xtmp + document.getElementById('dim').offsetWidth-2 && e.clientX <= xtmp + document.getElementById('dim').offsetWidth){ droite = true; if(e.clientY >= ytmp && e.clientY <= ytmp+2){ haut = true; } else if(e.clientY >= ytmp + document.getElementById('dim').offsetHeight-2 && e.clientY <= ytmp + document.getElementById('dim').offsetHeight){ bas = true; } } else if(e.clientY >= ytmp && e.clientY <= ytmp+2){ haut = true; } else if(e.clientY >= ytmp + document.getElementById('dim').offsetHeight-2 && e.clientY <= ytmp + document.getElementById('dim').offsetHeight){ bas = true; } } function bouge(e){ var xtmp = document.getElementById('dim').offsetLeft; var ytmp = document.getElementById('dim').offsetTop; // si on a cliqué et qu'on bouge if(initier){ if(gauche){ document.getElementById('dim').style.left = e.clientX; document.getElementById('dim').style.width = document.getElementById('dim').offsetWidth + (x - e.clientX); if(haut){ document.getElementById('dim').style.top = e.clientY; document.getElementById('dim').style.height = document.getElementById('dim').offsetHeight + (y - e.clientY); } else if(bas){ document.getElementById('dim').style.height = document.getElementById('dim').offsetHeight + (e.clientY - document.getElementById('dim').offsetHeight); } } else if(droite){ document.getElementById('dim').style.width = document.getElementById('dim').offsetWidth + (e.clientX - document.getElementById('dim').offsetWidth); if(haut){ document.getElementById('dim').style.top = e.clientY; document.getElementById('dim').style.height = document.getElementById('dim').offsetHeight + (y - e.clientY); } else if(bas){ document.getElementById('dim').style.height = document.getElementById('dim').offsetHeight + (e.clientY - document.getElementById('dim').offsetHeight); } } else if(haut){ document.getElementById('dim').style.top = e.clientY; document.getElementById('dim').style.height = document.getElementById('dim').offsetHeight + (y - e.clientY); } else if(bas){ document.getElementById('dim').style.height = document.getElementById('dim').offsetHeight + (e.clientY - document.getElementById('dim').offsetHeight); } else{ document.getElementById('dim').style.left = e.clientX - (xinit-x); document.getElementById('dim').style.top = e.clientY - (yinit-y); } } // cherche le curseur adapté if(e.clientX >= xtmp && e.clientX <= xtmp+2){ document.getElementById('dim').style.cursor = "w-resize"; if(e.clientY >= ytmp && e.clientY <= ytmp+2){ document.getElementById('dim').style.cursor = "nw-resize"; } else if(e.clientY >= ytmp + document.getElementById('dim').offsetHeight-2 && e.clientY <= ytmp + document.getElementById('dim').offsetHeight){ document.getElementById('dim').style.cursor = "sw-resize"; } } else if(e.clientX >= xtmp + document.getElementById('dim').offsetWidth-2 && e.clientX <= xtmp + document.getElementById('dim').offsetWidth){ document.getElementById('dim').style.cursor = "e-resize"; if(e.clientY >= ytmp && e.clientY <= ytmp+2){ document.getElementById('dim').style.cursor = "ne-resize"; } else if(e.clientY >= ytmp + document.getElementById('dim').offsetHeight-2 && e.clientY <= ytmp + document.getElementById('dim').offsetHeight){ document.getElementById('dim').style.cursor = "se-resize"; } } else if(e.clientY >= ytmp && e.clientY <= ytmp+2){ document.getElementById('dim').style.cursor = "n-resize"; } else if(e.clientY >= ytmp + document.getElementById('dim').offsetHeight-2 && e.clientY <= ytmp + document.getElementById('dim').offsetHeight){ document.getElementById('dim').style.cursor = "s-resize"; } else{ document.getElementById('dim').style.cursor = "move"; } } function fin(e){ initier = false; gauche = false; droite = false; haut = false; bas = false; } function reset(){ document.getElementById('dim').style.cursor = "move"; } </script> </head> <body onmousemove="bouge(event);"> <div id="dim" onmouseout="reset();" onmousedown="init(event);" onmouseup="fin(event);">bla</div> </body> </html>
'scusez moi, c'est un peu long
Partager