拖拽模块move1

刚开的博客，想着写点什么，以前写过拖拽函数，后来又学习了模块化，于是一直想把之前写的拖拽函数封成一个独立的模块，方便以后调用，说干就干，下面码代码。。。

	<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的移动。