首页 > 网络编程 > JavaScript > javascript技巧 > JS 拖动效果

JS 拖动效果实现代码比较简单

2009-11-26 01:00:50 作者：

JS拖动效果，计算的位移，主要是应用了鼠标事件与坐标控制。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JS拖动效果</title> 
<script type="text/javascript"><!-- 
function DragPanel(Panel,event) 
{ 
var delayX=event.clientX-parseInt(Panel.style.left); 
var delayY=event.clientY-parseInt(Panel.style.top);

document.attachEvent("onmousemove",HandleMove); 
document.attachEvent("onmouseup",HandleUp);

event.cancelBubble=true; 
event.returnValue=false;

function HandleMove(e) 
{ 
e=window.event; 
Panel.style.left=event.clientX-delayX+"px"; 
Panel.style.top=event.clientY-delayY+"px"; 
event.cancelBubble=true; 
} 
function HandleUp() 
{ 
document.detachEvent("onmousemove",HandleMove); 
document.detachEvent("onmouseup",HandleUp); 
} 
event.cancelBubble=true; 
}

// --></script> 
</head> 
<body> 
<div style="position:absolute; width:200px; height:150px; left:100px; top:300px; background-color:Maroon;"> 
<div style="background-color:Red;" style="background-color:Red;" onmousedown="DragPanel(this.parentNode,event)">Drag Me</div> 
</div> 
</body> 
</html>

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

JS 拖动效果实现代码 比较简单

您可能感兴趣的文章:

JS 拖动效果实现代码比较简单