用鼠标移动Table，以及用鼠标调整Table大小[转]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head>
<body>
用鼠标移动层<br>
部分代码来自网友 xinyunyishui(心云意水) 对网友 chenxiang123 所开贴的回复：<br>
http://community.csdn.net/Expert/topic/3469/3469939.xml?temp=.6519739
用鼠标移动层<br>
部分代码来自网友 xinyunyishui(心云意水) 对网友 chenxiang123 所开贴的回复：<br>
http://community.csdn.net/Expert/topic/3469/3469939.xml?temp=.6519739
<br>
<select><option>Select for Test</select>
<iframe style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>
<table style="position:absolute;top:0;left:0;width:200;height:200;background-color:cccccc;z-index:10" id=theAlterableTable >
<tr >
<td style="width:1" bgcolor=#cccccc rowspan=3 ></td>
<td bgcolor=#cccccc colspan=2 style="cursor:move;" align=center onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this) >
header
</td>
</tr>
<tr rowspan=2>
<td style="padding-bottom:3;padding-right:3;background-color:blue;height:100%" valign=top>
content<br>
content<br>
content<br>
content<br>
content<br>
<table style="position:absolute;top:0;left:0;width:200;height:200;background-color:cccccc;z-index:10" id=theAlterableTable >
<tr >
<td style="width:1" bgcolor=#cccccc rowspan=3 ></td>
<td bgcolor=#cccccc colspan=2 style="cursor:move;" align=center onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this) >
header
</td>
</tr>
<tr rowspan=2>
<td style="padding-bottom:3;padding-right:3;background-color:blue;height:100%" valign=top>
content<br>
content<br>
content<br>
content<br>
content<br>
</td>
<td bgcolor=#cccccc style="cursor:e-resize;width:1" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,false) onmouseup=MouseUpToResize(this) ></td>
</tr>
<tr style="font-size:1">
<td bgcolor=#cccccc style="cursor:n-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,false,true) onmouseup=MouseUpToResize(this) ></td>
<td bgcolor=#cccccc style="cursor:se-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,true) onmouseup=MouseUpToResize(this) ></td>
</tr>
</table>
<td bgcolor=#cccccc style="cursor:e-resize;width:1" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,false) onmouseup=MouseUpToResize(this) ></td>
</tr>
<tr style="font-size:1">
<td bgcolor=#cccccc style="cursor:n-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,false,true) onmouseup=MouseUpToResize(this) ></td>
<td bgcolor=#cccccc style="cursor:se-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,true) onmouseup=MouseUpToResize(this) ></td>
</tr>
</table>
</body>
</html>
</html>
<script language=javascript>
var beginMoving=false;
var beginResizing=false;
var beginResizing=false;
function MouseDownToRemove(obj){
obj.mouseDownX=event.clientX;
obj.mouseDownY=event.clientY;
obj.offsetParentOffsetLeft=theAlterableTable.offsetLeft;
obj.offsetParentOffsetTop=theAlterableTable.offsetTop;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToRemove(obj){
if(!beginMoving) return false;
if(event.x>1) //防止被移出页面之外，造成无法移回的后果
theAlterableTable.style.left = obj.offsetParentOffsetLeft+(event.x-obj.mouseDownX);
if(event.y>1)
theAlterableTable.style.top = obj.offsetParentOffsetTop+(event.y-obj.mouseDownY);;
}
function MouseUpToRemove(obj){
obj.releaseCapture();
beginMoving=false;
}
obj.mouseDownX=event.clientX;
obj.mouseDownY=event.clientY;
obj.offsetParentOffsetLeft=theAlterableTable.offsetLeft;
obj.offsetParentOffsetTop=theAlterableTable.offsetTop;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToRemove(obj){
if(!beginMoving) return false;
if(event.x>1) //防止被移出页面之外，造成无法移回的后果
theAlterableTable.style.left = obj.offsetParentOffsetLeft+(event.x-obj.mouseDownX);
if(event.y>1)
theAlterableTable.style.top = obj.offsetParentOffsetTop+(event.y-obj.mouseDownY);;
}
function MouseUpToRemove(obj){
obj.releaseCapture();
beginMoving=false;
}
function MouseDownToResize(obj){
beginResizing=true;
obj.setCapture();
theAlterableTable.w=event.x-theAlterableTable.style.pixelWidth;
theAlterableTable.h=event.y-theAlterableTable.style.pixelHeight;
}
function MouseMoveToResize(obj,changeW,changeH){
if(!beginResizing) return false;
try //try 的目的是：屏敝给width赋负值的意外
{
if(changeW) theAlterableTable.style.width = event.x-theAlterableTable.w;
if(changeH) theAlterableTable.style.height = event.y-theAlterableTable.h;
}
catch(e){;}
}
function MouseUpToResize(obj){
obj.releaseCapture();
beginResizing=false;
beginResizing=true;
obj.setCapture();
theAlterableTable.w=event.x-theAlterableTable.style.pixelWidth;
theAlterableTable.h=event.y-theAlterableTable.style.pixelHeight;
}
function MouseMoveToResize(obj,changeW,changeH){
if(!beginResizing) return false;
try //try 的目的是：屏敝给width赋负值的意外
{
if(changeW) theAlterableTable.style.width = event.x-theAlterableTable.w;
if(changeH) theAlterableTable.style.height = event.y-theAlterableTable.h;
}
catch(e){;}
}
function MouseUpToResize(obj){
obj.releaseCapture();
beginResizing=false;
}
</script>
浙公网安备 33010602011771号