Splitter entre 2 balises DIV

Version imprimable

27/11/2007, 12h13
Yeri

Splitter entre 2 balises DIV
Bonjour,

J'aimerais créer un spiltter en CSS et/ou Javascript entre deux balises DIV, pour pouvoir modifier leurs tailles.
En fait j'ai le code HTML suivant
Code:

1 2 3 4 5 6 7 8 9 10 11 <html> <head> <link type="text/css" rel="stylesheet" href="toto.css" /> </head> <body> <div id="div1">DIV1</div> <div id="splitter"></div> <div id="div2">DIV2</div> </body> </html>
et j'aimerais qu'on puissent déplaçer le splitter avec la souris pour agrandir/diminuer DIV1 et DIV2.

Quelqu'un aurait-il une idée si cela est possible ?

merci
27/11/2007, 14h13
rootdaoud

Bonjour,
Il ya des framework javascript-telque rico...- qui permettent sa.
essayez de chercher la desus.
Merci.

J'ai deja fait un truc dans le meme genre...
Tu peux peut etre t'en inspirer:

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
 
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 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;
}
 
function bouge(e){
	// si on a cliqué et qu'on bouge
	if(initier){
		xtmp = document.getElementById(idEnCours).offsetLeft;
		ytmp = document.getElementById(idEnCours).offsetTop;
		document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth - 25);
		document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
	}
}
 
function fin(e){
	initier = false;
}

En fait, dans le div que je veux redimensionner, j'ai un div dans le coin en bas à droite qui lorsque je clique dessus déclenche la fonction init = début redimensionnement:

Code:

1
2
3
4
5
 
<body onmousemove="bouge(event);" onmouseup="fin(event);">
<DIV class=box id=boxHandle1 >
  <DIV id=carre_resize onmousedown="init(event,'boxHandle1');"></DIV>
</DIV>

je crois qu'il voulait plutot un splitter entre DEUX div, lorsqu'il bouge le splitter les deux div a ses extremités se redimensionnent :
Fait très rapidement donc je m'excuse de la qualité du code , ceci n'est qu'a titre d'exemple :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
.boiterouge{
	background-color:#FFDFE6;
	width:150px;
	height:150px;
	float:left;
}
.boitebleu{
	background-color:#DFFFF8;
	width:150px;
	height:150px;
	float:left;
}
 
.splitter{
	background-color:gray;
	width:20px;
	height:150px;
	float:left;
}
#info{
  border:2px dashed #ccc;
}
 
.drag{
border:2px dashed #F1CEC5;
cursor:move;
}
</style>
<script type="text/javascript">
/*######################################
script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
######################################*/
 
var classMove = "splitter";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
var tailleOriRouge = 150;
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
if(window.attachEvent){
	document.onmousedown = start;
	document.onmousemove = drag;
	document.onmouseup = drop;
}
else{
	document.addEventListener("mousedown",start, false);
	document.addEventListener("mousemove",drag, false);
	document.addEventListener("mouseup",drop, false);
}
 
 
 
}
 
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Détection de l'élément sur lequel on a clické
	monElement = (e.target)? e.target:e.srcElement;
	//alert(monElement.nodeName);
	if(monElement)
	{
	//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
		getClassDrag(monElement);
		if(myObjectClick){
			positionXAtClick = e.clientX;
			positionYAtClick = e.clientY;
			positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
			positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
 
		}
	}
	return false;
}
 
function drag(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
 
	//Si l'objet est déplaçable et qu'il existe
	if(movable && myObjectClick){
		//On récupère la position de la souris par rapport à l'objet
		myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
		myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
		//On désactive la sélection pendant le drag and drop
		document.body.focus();
		bbleu = document.getElementById('boitebleu');
		brouge = document.getElementById('boiterouge');
		bbleu.style.width = (bbleu.offsetLeft + e.clientX -20)+ "px" ;
 
  		  if(parseInt(bbleu.style.width) > tailleOriRouge){
          brouge.style.width = 150 -(parseInt(bbleu.style.width)-150) +20+ "px" ;
          document.getElementById('info').innerHTML = "r" + brouge.style.width +"b" + bbleu.style.width;
        }
        else{
            brouge.style.width = 150 + (150- parseInt(bbleu.style.width)) +  +20+ "px" ;
        }
 
 
 
		//document.getElementById('conteneur').style.MozUserSelect ="none";
 
	}
	return false;
}
 
function drop(){
		if(myObjectClick){
		//document.getElementById('conteneur').style.MozUserSelect ="text";
		}
 
	myObjectClick = null;
	movable = false;
	positionXAtClick = null;
	positionYAtClick = null;
	positionXMyobjectClick = null;
	positionYMyobjectClick = null;	
	return false;
}
 
function getClassDrag(myObject){
	with(myObject){
		var x = className;
		listeClass = x.split(" ");
		//On parcours le tableau pour voir si l'objet est déplaçable
		for(var i = 0 ; i < listeClass.length ; i++){
			if(listeClass[i] == classMove){
				movable = true;
				myObjectClick = myObject;
				break;
			}
		}
	}
}
 
window.onload = init_evenement;
</script>
 
</head>
 
<body>
<div class="boitebleu" id="boitebleu"></div>
<div class="splitter"></div>
<div class="boiterouge" id="boiterouge"></div>
<div id="info"></div>
</body>
</html>

coordialement

27/11/2007, 15h19
E.Bzz

Bonjour,
@ le_chomeur > Joli ! Mais avec IE6 il faut pas dépasser les bornes (enfin ... celle de droite) ;)

A+
27/11/2007, 16h04
le_chomeur

Lol oui je sais, c'est un code donné a titre d'exemple, je n'ai pas limité la taille d'agrandissement, depuis le peu de temps que je suis ici, je constate fréquement que les gens y viennent , demande de l'aide, et bien souvent , ne cloture pas le sujet ...
donc je ne donne plus de code tout fait complet :)
sauf exception ( si la personne a déja essayé et cherché , ou arrive avec du code à lui :) )
Ce n'est peut-être pas sympa mais voila , je suis un pti nouveau ici et on m'en tiendra peut-être rigueur mais bon ... il vaut mieux une aide qui aide a comprendre plutôt qu'un script pondu dans le bec ^^

Bonne journée
27/11/2007, 16h20
E.Bzz

Citation:

Envoyé par le_chomeur

il vaut mieux une aide qui aide a comprendre plutôt qu'un script pondu dans le bec ^^

:king:

L'eternel choix entre "donner du poisson" et "apprendre à pêcher" ...
27/11/2007, 18h46
Yeri

Merci beaucoup pour toutes ces réponses je vais essayer de ce pas...
Aucun souci pour la qualité du code, je ne cherche pas un code tout fait mais plutôt des pistes sur la façon de faire car je ne suis pas très familier avec le javascript.