大家有这样的源代码吗？http://www.yakexi.com/ 右边那个“客户服务部”可以拖动和随滚动条移动的”东东“。

Question

可用鼠标移动和改变大小的table(20041029):
http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htm

Answer 1

javascript如下
-------------------------------
<script language=javascript>var beginMoving=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;
}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;}</script>

Answer 2

html如下
----------------------
<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>

Answer 3

要源程序很简单,打开http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htm
在IE菜单的"查看->源文件"就可以看见源程序了