拖动效果函数演示 by Longbill.cn

最新推荐文章于 2015-06-19 16:07:00 发布

转载最新推荐文章于 2015-06-19 16:07:00 发布 · 414 阅读

文章标签：

#div #function #scroll #null #border #string

本文介绍了一种通过JavaScript实现的简单拖动效果函数，该函数可以让页面中的元素响应鼠标操作并进行位置移动。代码适用于多种浏览器环境，并展示了如何应用于具体元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>拖动效果函数演示 by Longbill.cn</title>
<style>
body {
font-size: 12px;
color: #333333;
border: 0px solid blue;
}

div {
position: absolute;
background-color: #c3d9ff;
margin: 0px;
padding: 5px;
border: 0px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<script>
function drag(o,s){
if (typeof o == "string") o = document.getElementById(o);

o.onmousedown = function(a){
   this.style.cursor = "move";
   this.style.zIndex = 10000;
   var d=document;
   if(!a)a=window.event; //与firfox的区别
   var x = a.clientX-o.offsetLeft;
   var y = a.clientY-o.offsetTop;
   //author: www.longbill.cn
   d.ondragstart = "return false;"
   d.onselectstart = "return false;"
   d.onselect = "document.selection.empty();"

   if(o.setCapture)
   o.setCapture();
   else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

/*
下面绑定的事件对象是document.如果改做对象不会松绑mousedown.
*/
   d.onmousemove = function(a){
    if(!a)a=window.event;
    o.style.left = a.clientX-x;
    o.style.top = a.clientY-y;
   }

   d.onmouseup = function(){
    if(o.releaseCapture)
   o.releaseCapture();
    else if(window.captureEvents)
   window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    d.onmousemove = null;
    d.onmouseup = null;
    d.ondragstart = null;
    d.onselectstart = null;
    d.onselect = null;
    o.style.cursor = "normal";
    o.style.zIndex = o.orig_index;
   }
}
}
</script>

<div id="div1" style="left: 10px; top: 10px;">div1:我可以被拖动</div>
<div id="div2" style="left: 120px; top: 10px; background-color: #f3d9ff">div2:来拖我呀</div>
<div id="div3" style="left: 230px; top: 10px; background-color: #c3ffff">div3:我随便你拖</div>
<div id="div4" style="left: 10px; top: 120px; background-color: #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看</div>
<div id="div5"
style="left: 120px; top: 120px; background-color: #f3d944">作者:
Longbill <a href=http://www.longbill.cn target=_blank>www.longbill.cn</a>
</div>
<div id="div6"
style="left: 230px; top: 120px; background-color: #e3f944; width: 200px;">参数说明:

drag(obj [,scroll]); obj:对象的id或对象本身; scroll(可选):对象是否随窗口拖动而滑动，默认为否

鼠标右键查看源代码</div>

</script>

</body>
</html>