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

Version imprimable

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 :mouarf:
Mais j'ai un bug :cry:
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:

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 :P :oops::aie:

17/08/2007, 08h10
Tober

Y a personne qui est interessé par faire un div comme ça :question:
bon tant pis, je dois être encore plus geek que ce que je pensais :arf: :mouarf2:

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 :aie: (j'm'embrouille vite avec les coordonnées, positions relatives et autres "joyeuseté" :lol:)

[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

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:

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é... :mouarf:

17/08/2007, 09h37
jypees

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 :P
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 :yaisse2: Des que j'ai le temps je la fais et je la poste :king:
17/08/2007, 09h49
Tober

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 :aie:

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 !!!
17/08/2007, 11h23
jypees

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 :)
17/08/2007, 11h26
jypees

x = document.getElementById(id).offsetLeft - document.body.scrollLeft;
y = document.getElementById(id).offsetTop - document.body.scrollTop;
ca et puis c'est parti ca fonctionne ;) tu peux draguer l'element vers le bord de la fenetre pour te rendre compte du changement :yaisse2:
17/08/2007, 11h29
Tober

merci, je vais faire ca :D

Ton script est pas mal du tout!

En fait j'aimerais rendre un div redimensionnable, sans qu'il soit draggable...

Sauf que je souhaiterais qu'il soit redimensionnable à l'aide d'un petit carré en bas à droite du div, et non avec les bords...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <style type="text/css"> #carre_resize { cursor: se-resize; position: absolute; bottom: 0px; right: 0px; width: 10px; height: 10px; background-color: blue; font-size: 1px; } </style> <div> <div id="carre_resize"></div> </div>

17/08/2007, 12h14
jypees

c'est plus compliqué ;) car en javascript plus tu rentres dans des details plus c'est chiant :mrgreen:
De toute facon j'ai l'intention de faire ce script car il peux etre utile a toi et puis je le posterais sur javascript france :king: Regarde celui la et puis patiente :)
17/08/2007, 12h31
calitom

J'aurai pourtant cru que ce serait plus simple avec un petit carré dans le div a redimensionner!
Je pensais qu'au lieu des if bord=droite else if bord=gauche....
Il y aurait un truc du genre onclick sur div carre -> resize du div conteneur...

Et puis ca aurait enlever quelques variables...

Parce qu'en fait j'ai essayé d'utiliser le script de tobler, mais sans succès...

En fait j'utilise déja une fonction pour dragger mes div, et je voulais juste ajouter la possibilité de les redimensionner... Et si je voulais utiliser un petit carré en bas à droite du div, c'est parce que les bord à droite et en bas sur mes div ne sont pas visibles...
17/08/2007, 12h41
jypees

c'est plus compliqué car tu dois placer generiquement chaque carré sur un bord et puis si tu veux faire propre faire apparaitre le carré lorsqu'on arrive dans la zone. Et crois moi si tu geres ca pour les quatres coins plus le boulot de tober, ca devient un projet a par entiere :cry: car j'ai si tu places ca en css, ca va marcher mais question portabilité c'est la cata. Le but est d'avoir un js et quand tu places l'attribut sur un div il est modifiable, sinon bonjour la galere :S moi il y a de js dans un html et moins tu souffriras :) sinon ---> :bug:
17/08/2007, 12h46
calitom

Va voir tes messages privés, tu auras une idée de ce que je souhaite faire...
17/08/2007, 13h12
Tober

Comme le dis jypees, faire des choses comme ça est assez complexe, tu n'as qu'a regarder la taille de mon code, rien que pour faire ça sans decoration, et sans contrainte, même si le code n'est pratiquement pas optimisé...

Moi j'ai seulement fait ce code pour pouvoir tester les évènement souris, récupérer les coordonnées de la souris et m'en servir pour les divs par exemple, mais déjà, j'ai remarqué que le code marchait bien sous IE mais par trop sous FF !

En tout cas, je me suis bien amusé :yaisse2:

pour bien faire il faut placer des evenements attacher a la window :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 if(window.addEventListener) // Mozilla, Netscape, Firefox { object.addEventListener('mousedown', fct_down, false); object.addEventListener('mousemove', fct_move, false); object.addEventListener('mouseup', fct_up, false); } else // IE { object.attachEvent('onmousedown', fct_down); object.attachEvent('onmousemove', fct_move); object.attachEvent('onmouseup', fct_up); }
La fonction fct_down va recuperer les coordonnées de la sourie et l'object en cour (avec target en javascript). Puis regarder suivant le clique quelle partie deplacer (deja amuse toi avec offset et le scroll).

Puis la fonction fct_move va appliquer les valeurs de la sourie sur le bord du div associé. Le soucis etant de bien faire ses gestions d'erreurs (valeur negative du style bottom qui passe par dessus un top c'est pas super logique).

La fonction fct_up va unset toutes les variables globales. Il est evident que le pointeur de l'object en cour est globale afin d'etre accessible partout :) Aussi les valeurs de la sourie pour qu'a tout moment on sache ou l'on est :)

Vienne apres se greffer la dessus (lors du fct_move mais hors clique) la gestion d'ajout des carrés possible. La encore c'est recuperation en live de l'objet avec ajout (document.createElement('div') et appendChild) du petit carré qui doit s'effacer lors d'un onmouseout.

J'ai fais vraiment simple mais il y a de quoi se prendre la tete bien comme il faut :) :king:

Maintenant au boulot :bug: :bug: :bug: :bug: :bug: :lol:

25/08/2007, 00h08
yaz1234

salut,
depuis le temps ke je galere sur ce point...Je n'y connais rien en js, je voudrais avoir une balise div qui soit elargissable via le cote droit. En fait, j ai un menu contenant des titres un eu longs, je voudrais ke l utilisateur ai la possibilite d'elargir le cote gauche de la page (la ou se trouv mon arborescence de liens) pour voir le titre du lien.
En gros c un peu ce ki est fait via votre script mais sans le deplassement de la balise, juste l'elargir en cas de besoin.
Merci de votre aide
Hanlin