zoukankan      html  css  js  c++  java
  • 拖拽模块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的移动。

    (我不怕千万人阻挡,只怕自己投降!)
  • 相关阅读:
    基站选址(编程之美2015资格赛)
    2月29日(编程之美2015资格赛)
    跳马
    电子老鼠闯迷宫
    解决按钮重复提交 unbind+bind+setTimeout
    XMLHttpRequest 中 blob类型数据转text
    ExtJs之列表(grid)
    ExtJs之组件(window)
    ExtJs基础
    问题与成长
  • 原文地址:https://www.cnblogs.com/eco-just/p/7399802.html
Copyright © 2011-2022 走看看