刚开的博客,想着写点什么,以前写过拖拽函数,后来又学习了模块化,于是一直想把之前写的拖拽函数封成一个独立的模块,方便以后调用,说干就干,下面码代码。。。
<script> var move =(function(){ function drop(bar,target){ var target=document.getElementById("target"),bar=document.getElementById("bar"); bar.onmousedown=drag; function drag(event){ event=event||window.event; var ox=event.clientX-target.offsetLeft,oy=event.clientY-target.offsetTop; document.onmousemove=function(event){ event=event||window.event; var oh=document.documentElement.clientHeight,ow=document.documentElement.clientWidth, maxy=oh-target.offsetHeight,maxx=ow-target.offsetWidth; var x=event.clientX-ox,y=event.clientY-oy; if(x<0)x=0; else if(x>maxx)x=maxx; if(y<0)y=0; else if(y>maxy)y=maxy; target.style.left=x+"px"; target.style.top=y+"px"; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; } } return{ go:drop } })(); </script>
这个move模块对外暴露了一个go方法,即内部定义的drop函数;
调用方法:move.go(bar,target);
如图所示,定义了两个div,#bar和#target(温馨提示:因为是模块内部定义好的,所以必须是这两个id名,其他id名会导致无效哦)点击#bar然后拖动会引起整体#target的移动。