java web可以拖动表格单元格大小的html，鼠标拖动改变表格大小（四）
时间:2011-06-16 iteye heisetoufa
效果图：拖动带颜色的框，可以上下左右拖动表格宽度
特点：拖动容易，上下左右框都可拖动
代码：
Html代码
<table cellspacing=0 id=mytable cellpadding=0 border=0 style="position:absolute;left:50;top:50;width:100;height:100;">
<tr>
<td colspan=3 height=2 bgcolor=blue></td>
</tr>
<tr>
<td bgcolor=blue width=2></td>
<td>
<table width=100% height=100%>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td bgcolor=blue width=2 style="cursor:w-resize" id="wresize"></td>
</tr>
<tr>
<td colspan=2 bgcolor=blue height=2 id="nresize" style="cursor:n-resize"></td>
<td bgcolor=blue height=2 style="cursor:nw-resize" id="nwresize"></td>
</tr>
</tr>
</table>
<script language=javascript>
resizing=false;
resizeto=null;
buttonevent=null;
function resizestart()
{
buttonevent=event.srcElement;
if((buttonevent.id=="nwresize")||(buttonevent.id=="wresize")|| (buttonevent.id=="nresize"))
{
if(buttonevent.id=="nwresize")resizeto="nw";
if(buttonevent.id=="nresize")resizeto="n";
if(buttonevent.id=="wresize")resizeto="w";
resizing=true;
dragx=event.x-mytable.offsetWidth;
dragy=event.y-mytable.offsetHeight;
buttonevent.setCapture();
}
}
function resize()
{
if(resizing)
{
if((resizeto=="w")||(resizeto=="nw")) mytable.style.pixelWidth=event.clientX-dragx;
if((resizeto=="n")||(resizeto=="nw")) mytable.style.pixelHeight=event.clientY-dragy;
}
}
function resizeend()
{
resizing=false;
buttonevent.releaseCapture();
}
document.onmousedown=resizestart;
document.onmousemove=resize;
document.onmouseup=resizeend;
</script>
|
