js 页面模块自由拖动实例

时间：2020-11-30 13:42:57|栏目：JavaScript代码|点击：次

<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需再刷新一下页面才能执行]

上一篇：Javascript 类型转换方法

栏目：JavaScript代码

下一篇：如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

本文标题：js 页面模块自由拖动实例

本文地址：http://www.codeinn.net/misctech/27972.html

更多JavaScript代码

JavaScript代码

js 页面模块自由拖动实例

阅读排行

推荐教程