刚开的博客,想着写点什么,以前写过拖拽函数,后来又学习了模块化,于是一直想把之前写的拖拽函数封成一个独立的模块,方便以后调用,说干就干,下面码代码。。。
<script>
var move =(function(){
function drop(bar,target){
var target=document.getElementById("target"),bar=document.getElementById("bar");
bar.οnmοusedοwn=drag;
function drag(event){
event=event||window.event;
var ox=event.clientX-target.offsetLeft,oy=event.clientY-target.offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
}
}
return{
go:drop
}
})();
</script>
这个move模块对外暴露了一个go方法,即内部定义的drop函数;
调用方法:move.go(bar,target);
如图所示,定义了两个div,#bar和#target(温馨提示:因为是模块内部定义好的,所以必须是这两个id名,其他id名会导致无效哦)点击#bar然后拖动会引起整体#target的移动。
so,第一篇博文就这样结束了。