js 页面模块自由拖动实例

时间:2020-05-12 人气:0

<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需刷新才能执行]

加载全部内容