Agrandir en drag & drop un <Table>

Bonjour à tous,

Depuis 2 jours je cherche un moyen simple et compatible IE & FF pour pouvoir agir en drag & drop sur la taille vertical d'un <Table> ou <Div>

Avez-vous connaissance d'un exemple simple et qui ne ferait pas 600 lignes de code ?

PS : pour mon premier post je tiens à remercier developpez.com et son équipe car ils m'ont beaucoup aidé...

Bonjour Ikaly,

Regardes ce script si tu ne pourrais pas l'adapter pour agrandir un tableau au lieu d'une image.

Télécharger la librairie (exemple)

C'est compatible IE, FF et plusieurs autres navigateurs.

le problème de ce genre de scripts c'est qu'ils sont trop gros à décortiquer... je cherche quelque chose de simple :) pour mon pauvre cerveau :).

PS : j'avais dis pas plus de 600 lignes tu me donne un exemple de 1400 lol

J'ai trouvé un code, je voudrais la même chose mais en plus simplifié et surtout pour agrandir verticalement le tableau.

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
 
<style type="text/css">
.Resizor {
	width: 1px;
	background-color: #000;
	cursor:e-resize
}
 
</style>
<script language="javascript" type="text/javascript">
var MinSize=0;
var _startPosition = 0;
var _diffPosition = 0;
var _allowMove = false;
var _resizerColumn = null;
var _firstColumn = null;
var _secondColumn = null;
var _resizerColumnLeft = 0;
var _resizerColumnWidth = 0;
var _firstColumnLeft = 0;
var _firstColumnWidth = 0;
var _secondColumnLeft = 0;
var _secondColumnWidth = 0;
var _systemEvent = null;
if (navigator.appName == 'Netscape') {
	document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP | Event.ONLOAD);
}
document.onmouseup = disableMouseMovement;
document.onmousemove = setNewPosition;
function setPosition() {
	// Called for OnMouseDown event
	_startPosition = _systemEvent.clientX;
	_allowMove = true;	
	_resizerColumnLeft = findPosX(_resizerColumn);
	_resizerColumnWidth = _resizerColumn.offsetWidth; //_resizerColumn.style.width;
	_firstColumnLeft = findPosX(_firstColumn);
	_firstColumnWidth = _firstColumn.offsetWidth; //_firstColumn.style.width;
	_secondColumnLeft = findPosX(_secondColumn);
	_secondColumnWidth = _secondColumn.offsetWidth; //_secondColumn.style.width;
	return true;
}
 
function setResizeColumns(resizerColumn, firstColumn, secondColumn) {
	// Called for OnMouseOver event
	// resizerColumn is the actual object of the column that will be moved so that
	// firstColumn and secondColumn can be resized.
	// firstColumn will have its dimensions either grown or shrunk.
	// secondColumn will have the exact opposite done to it that firstColumn has.
	// If firstColumn is shrink by 60px, secondColumn is grown by 60px, the opposite also holds true.
	resizerColumn=document.getElementById(resizerColumn);
	firstColumn=document.getElementById(firstColumn);
	secondColumn=document.getElementById(secondColumn);
	if (_allowMove == false) {
		_resizerColumn = resizerColumn;
		_firstColumn = firstColumn;
		_secondColumn = secondColumn;
	}
	return true;
}
 
function disableMouseMovement(e) {
	// Called for OnMouseUp event
	_allowMove = false;
	return false;
}
 
function setNewPosition(e) {
	// Called for OnMouseMove event
	// BEGIN_HACK so that setPosition() can work.
	if (navigator.appName == 'Netscape') {
	_systemEvent = e;
	} else {
	_systemEvent = event;
	}
	// END_HACK
	newPosition = _systemEvent.clientX;
	if (_allowMove) {
		_diffPosition = _startPosition - newPosition;
		var tpos1 = (parseInt(_firstColumnWidth) - parseInt(_diffPosition)) ;
		var tpos2 = (parseInt(_secondColumnWidth) + parseInt(_diffPosition)) ;
		if (tpos1<MinSize) return;
		if ((tpos2<MinSize) && (_firstColumnWidth>tpos1)) return;
		if (tpos2<0) tpos2=0;
		if (tpos1<0) tpos1=0;
 
		_firstColumn.style.width = tpos1+ "px";
		_secondColumn.style.width = tpos2+ "px";
	}
	return true;
}
 
function findPosX(obj) {
	var curleft = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
	curleft += obj.x;
	return curleft;
}
 
function findPosY(obj){
	var curtop = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
	curtop += obj.y;
	return curtop;
}
</script>
 
 
 
<table border=1>
<tr>
<td id="c0">bla</td>
 
<td class="Resizor" id="c01" onmousedown="setPosition();" onmouseover="setResizeColumns('c01', 'c0', 'c1');">
&nbsp;
</td>
 
<td id="c1">bla</td>
 
<td class="Resizor"  id="c12" onmousedown="setPosition();" onmouseover="setResizeColumns('c12', 'c1', 'c2');">
&nbsp;
</td>
 
<td id="c2">bla</td></tr>
</table>

Si une bonne âme à le tps de m'aider à faire ça, car là je rame grave...