js 页面模块自由拖动实例

<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" onmousedown="MouseDownToMove（this）" onmousemove="MouseMoveToMove（this）" onmouseup="MouseUpToMove（this）;" onmouseover="MouseOverFun（this）;" >a1</td> <td bgcolor=blue class="removableObj" onmousedown="MouseDownToMove（this）" onmousemove="MouseMoveToMove（this）" onmouseup="MouseUpToMove（this）;" onmouseover="MouseOverFun（this）;" >a2</td> </tr> <tr> <td bgcolor=#cccccc class="removableObj" onmousedown="MouseDownToMove（this）" onmousemove="MouseMoveToMove（this）" onmouseup="MouseUpToMove（this）;" onmouseover="MouseOverFun（this）;" >b1</td> <td bgcolor=#eeeeee class="removableObj" onmousedown="MouseDownToMove（this）" onmousemove="MouseMoveToMove（this）" onmouseup="MouseUpToMove（this）;" onmouseover="MouseOverFun（this）;" >b2</td> </tr> </table> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]