JavaScript 拖动改变面板大小
上面是实际效果，虽然丑陋。不过当时写这个效果的时候也并不顺利。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#tab
{
table-layout:auto;
border-collapse:collapse;
border:1px solid #000000;
width:100%;
}
div
{
width:100%;
margin:0px;
padding:0px;
overflow:auto;
border: 1px solid #4CA2ED;
background-color:#E8F2FE;
font-size:9pt;
}
td
{
position:relative;
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
function $(dom_id)
{
return document.getElementById(dom_id);
}
function MouseDownToResize(obj)
{
obj.mouseDownY = event.clientY;
$('td1').pareneTdH = $('td1').offsetHeight;
$('td2').pareneTdH = $('td2').offsetHeight;
$('td3').pareneTdH = $('td3').offsetHeight;
$('tab').pareneTableH = $('tab').offsetHeight;
obj.setCapture();//事件扩张
}
function MouseMoveToResize(obj)
{
if(!obj.mouseDownY) return false;
var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
//拖动
if((newHeight<0 && -1*newHeight<$('td1').pareneTdH )||(newHeight>0 && newHeight<$('td3').pareneTdH))
{
$('td1').style.height = $('td1').pareneTdH+newHeight;
$('td3').style.height = $('td3').pareneTdH-newHeight;
$('div1').style.height = $('td1').pareneTdH+newHeight;
$('div3').style.height = $('td3').pareneTdH-newHeight;
$('tab').style.height = $('tab').pareneTableH;
window.status = newHeight +"||"+ $('td3').style.height;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</script>
</head>
<body>
<table id="tab" cellpadding="0" cellspacing="0">
<tr><td valign=top id="td1"><div id="div1" style="height:250px;">
<pre>
function $(dom_id)
{
return document.getElementById(dom_id);
}
function MouseDownToResize(obj)
{
obj.mouseDownY = event.clientY;
$('td1').pareneTdH = $('td1').offsetHeight;
$('td2').pareneTdH = $('td2').offsetHeight;
$('td3').pareneTdH = $('td3').offsetHeight;
$('tab').pareneTableH = $('tab').offsetHeight;
obj.setCapture();//事件扩张
}
function MouseMoveToResize(obj)
{
if(!obj.mouseDownY) return false;
var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
//拖动
if((newHeight<0 && -1*newHeight<=$('td1').pareneTdH )||(newHeight>0 && newHeight<=$('td3').pareneTdH))
{
$('td1').style.height = $('td1').pareneTdH+newHeight;
$('td3').style.height = $('td3').pareneTdH-newHeight;
$('div1').style.height = $('td1').pareneTdH+newHeight;
$('div3').style.height = $('td3').pareneTdH-newHeight;
$('tab').style.height = $('tab').pareneTableH;
window.status = newHeight +"||"+ $('td3').style.height;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</pre>
</div></td></tr>
<tr bgcolor="#000" height="2" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);" style="cursor:n-resize;"><td id="td2"></td></tr>
<tr><td id="td3"><div id="div3" style="height:150px;"></div></td></tr>
</table>
</body>
</html>