拖拽模块move

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

	<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,第一篇博文就这样结束了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值