Réalisation d'un div déplaçable et modifiable !

**Tober** · 16/08/2007, 14h33

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

**Tober** · 17/08/2007, 08h10

Y a personne qui est interessé par faire un div comme ça

bon tant pis, je dois être encore plus geek que ce que je pensais

Le problème se situe juste sur les calculs qui utilise style.width ou offsetWidth (ou fonctions équivalentes) comme j'avais précisé dans le premier message, mais je vois pas ce que je fais de travers

(j'm'embrouille vite avec les coordonnées, positions relatives et autres "joyeuseté"

)

[edit]J'ai trouvé mes problèmes, maintenant j'essaye de rendre le code modulable pour plusieurs div en même temps, je posterais ça quand j'aurais finis

**Tober** · 17/08/2007, 09h29

Bon, voilà le résultat, il reste quelques bugs : le curseur ne marche que sur un seul div (alors que c'est géré pour les deux... mais j'ai du oublier des bêtises...)
Le curseur change de forme quand on passe une une bordure, mais c'est pas 100% fiable avec le redimensionnement (mais là aussi, c'est une bêtise)

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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<html>
<head>
<style type="text/css">
#dim1{
	border:1px solid red;
	position:absolute;
	left:100px;
	width:100px;
	top:100px;
	height:100px;
}
#dim2{
	border:1px solid blue;
	position:absolute;
	left:300px;
	width:100px;
	top:100px;
	height:100px;
}
div:hover{
	cursor:move;
}
body{
	cursor:n-resize;
}
</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
var idEnCours; // id du div qui est en cours de modif
 
function init(e, id){
	idEnCours = id;
	initier = true;
	xtmp = document.getElementById(id).offsetLeft;
	ytmp = document.getElementById(id).offsetTop;
	x = document.getElementById(id).offsetLeft;
	y = document.getElementById(id).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(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			bas = true;
		}
	}
	else if(e.clientX >= xtmp + document.getElementById(id).offsetWidth-2 && e.clientX <= xtmp + document.getElementById(id).offsetWidth){
		droite = true;
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			haut = true;
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			bas = true;
		}
	}
	else if(e.clientY >= ytmp && e.clientY <= ytmp+2){
		haut = true;
	}
	else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
		bas = true;
	}
}
 
function bouge(e){
	// si on a cliqué et qu'on bouge
	if(initier){
		xtmp = document.getElementById(idEnCours).offsetLeft;
		ytmp = document.getElementById(idEnCours).offsetTop;
		if(gauche){
			document.getElementById(idEnCours).style.left = e.clientX;
			document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (xtmp - e.clientX);
			if(haut){
				document.getElementById(idEnCours).style.top = e.clientY;
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
			}
			else if(bas){
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
			}
		}
		else if(droite){
			document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth);
			if(haut){
				document.getElementById(idEnCours).style.top = e.clientY;
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
			}
			else if(bas){
				document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
			}
		}
		else if(haut){
			document.getElementById(idEnCours).style.top = e.clientY;
			document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (ytmp - e.clientY);
		}
		else if(bas){
			document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
		}
		else{
			document.getElementById(idEnCours).style.left = e.clientX - (xinit-x);
			document.getElementById(idEnCours).style.top = e.clientY - (yinit-y);
		}
	}
	chercheCurseur(e, 'dim1');
	chercheCurseur(e, 'dim2');
}
 
function chercheCurseur(e, id){
	xtmp = document.getElementById(id).offsetLeft;
	ytmp = document.getElementById(id).offsetTop;
	// cherche le curseur adapté
	if(e.clientX >= xtmp && e.clientX <= xtmp+2){
		document.getElementById('body').style.cursor = "w-resize";
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			document.getElementById('body').style.cursor = "nw-resize";
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			document.getElementById('body').style.cursor = "sw-resize";
		}
	}
	else if(e.clientX >= xtmp + document.getElementById(id).offsetWidth-2 && e.clientX <= xtmp + document.getElementById(id).offsetWidth){
		document.getElementById('body').style.cursor = "e-resize";
		if(e.clientY >= ytmp && e.clientY <= ytmp+2){
			document.getElementById('body').style.cursor = "ne-resize";
		}
		else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
			document.getElementById('body').style.cursor = "se-resize";
		}
	}
	else if(e.clientY >= ytmp && e.clientY <= ytmp+2){
		document.getElementById('body').style.cursor = "n-resize";
	}
	else if(e.clientY >= ytmp + document.getElementById(id).offsetHeight-2 && e.clientY <= ytmp + document.getElementById(id).offsetHeight){
		document.getElementById('body').style.cursor = "s-resize";
	}
	else{
		document.getElementById('body').style.cursor = "move";
	}
}
 
function fin(e){
	initier = false;
	gauche = false;
	droite = false;
	haut = false;
	bas = false;
}
 
function reset(){
	document.getElementById('body').style.cursor = "auto";
}
 
</script>
</head>
<body id="body" onmousemove="bouge(event);" onmouseup="fin(event);">
<div id="dim1" onmouseout="reset();" onmousedown="init(event, 'dim1');">bla</div>
<div id="dim2" onmouseout="reset();" onmousedown="init(event, 'dim2');">bla</div>
</body>
</html>

Bon ben merci pour tout les participants pour m'avoir aidé...

**jypees** · 17/08/2007, 09h37

pas mal

seulement si je scroll ca ne fonctionne plus

donc n'oublis jamais dans n'importe quel programme drag and drop le window.scrollTop et window.scrollLeft

Et le rapport des arretes Top et Left sont moyenne mais sinon bon code

Donc calitom voila ce qu'il te reste à faire :p
Et tkt po Tober moi aussi je vais faire une source

car j'aime bien le concepte

Des que j'ai le temps je la fais et je la poste

**Tober** · 17/08/2007, 09h49

Merci pour ton message, mais explique moi voir le probleme du scrollTop/Left ?
ca change les coordonnées fournit par les e.clientX/Y ?

Sinon, comme tu dis les arrêtes top et left merde un peu parcequ'il faudrait un peu plus élargir vers la gauche ou le haut pour que le div reste tjs "sous la souris" je crois

J'ai fais surtout ça pour voir et connaître un peu plus les possibilités de JavaScript, qui commence d'ailleurs à me démontrer que c'est sacrément puissant !!!

**jypees** · 17/08/2007, 11h23

En faite pour le scrollTop et scrollLeft c'est tout con

Imaginons ta fenetre est plus petite

et je suis dans un scroll en bas de page. Tu prends un des divs et ca marche plus dutout car tu te referes au positionnement de la sourie et non plus au niveau de la page. Pour ce faire tu soustrais aux coordonnées de ta sourie les valeurs possibles du scroll top et scroll left et tu veras que ca fonctionnera

Réalisation d'un div déplaçable et modifiable !

JavaScript

Vue hybride

Discussions similaires

Partager

Partager