资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js 页面模块自由拖动实例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js页面模块自由拖动</title> <style> .removableObj { height:25;position:relative; } </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0Avar%20beginMoving%3Dfalse%3B%20%0D%0Avar%20sourceObj%3Dnull%3B%20%0D%0Avar%20objectObj%3Dnull%3B%20%0D%0Afunction%20MouseDownToMove(obj)%7B%20%0D%0Aobj.style.zIndex%3D1%3B%20%0D%0Aobj.mouseDownY%3Devent.clientY%3B%20%0D%0Aobj.mouseDownX%3Devent.clientX%3B%20%0D%0AbeginMoving%3Dtrue%3B%20%0D%0Aobj.setCapture()%3B%20%0D%0AsourceObj%3Dobj%3B%20%0D%0AobjectObj%3Dnull%3B%20%0D%0A%7D%20%0D%0Afunction%20MouseMoveToMove(obj)%7B%20%0D%0Aif(!beginMoving)%20return%20false%3B%20%0D%0Aobj.style.top%20%3D%20(event.clientY-obj.mouseDownY)%3B%20%0D%0Aobj.style.left%20%3D%20(event.clientX-obj.mouseDownX)%3B%20%0D%0A%7D%20%0D%0Afunction%20MouseUpToMove(obj)%7B%20%0D%0Aif(!beginMoving)%20return%20false%3B%20%0D%0Aobj.releaseCapture()%3B%20%0D%0Aobj.style.top%3D0%3B%20%0D%0Aobj.style.left%3D0%3B%20%0D%0Aobj.style.zIndex%3D0%3B%20%0D%0AbeginMoving%3Dfalse%3B%20%0D%0Awindow.setTimeout(%22swapFun()%22%2C10)%3B%20%0D%0A%7D%20%0D%0Afunction%20MouseOverFun(obj)%20%0D%0A%7B%20%0D%0AobjectObj%3Dobj%3B%20%0D%0A%7D%20%0D%0Afunction%20swapFun()%20%0D%0A%7B%20%0D%0Aif(sourceObj!%3Dnull%20%26%26%20objectObj!%3Dnull%20)%20%0D%0AsourceObj.swapNode(objectObj)%3B%20%0D%0AsourceObj%3Dnull%3B%20%0D%0AobjectObj%3Dnull%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程