信鸽网

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

  作者：bea

<!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 typ



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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: