js页面模块自由拖动实例_js 页面可以缩放拖动布局-CSDN博客

<html>

<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<title>js页面模块自由拖动</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script   language="javascript">
var   beginMoving=false;
var   sourceObj=null;
var   objectObj=null;
function   MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}

function   MouseMoveToMove(obj){
          if(!beginMoving)   return   false;
obj.style.top   =   (event.clientY-obj.mouseDownY);
obj.style.left   =   (event.clientX-obj.mouseDownX);
}
function   MouseUpToMove(obj){
if(!beginMoving)   return   false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",10);
}

function   MouseOverFun(obj)
{
objectObj=obj;
}

function   swapFun()
{
if(sourceObj!=null   &&   objectObj!=null   )
sourceObj.swapNode(objectObj);
sourceObj=null;
objectObj=null;
}
</script>
</head>

<body>
用鼠标移动TD(本代码也适合用鼠标进行其它对象的对换（如table,div等）)
<table   border="1"   width="300">
      <tr>
          <td   bgcolor=red   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >a1</td>
          <td   bgcolor=blue   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >a2</td>
      </tr>
      <tr>
          <td   bgcolor=#cccccc   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >b1</td>
          <td   bgcolor=#eeeeee   class="removableObj"   οnmοusedοwn='MouseDownToMove(this)'   οnmοusemοve='MouseMoveToMove(this)'   οnmοuseup='MouseUpToMove(this);'   οnmοuseοver="MouseOverFun(this);"   >b2</td>
      </tr>
</table>

</body>

</html>