<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>
drag("div1");
drag("div2");
drag("div3");
drag("div4",1);
drag("div5",1);
drag("div6",1);
</script>
</body>
</html>