zoukankan      html  css  js  c++  java
  • 面向对象组件开发-拖拽

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    

    CSS

    #div1{
    	 100px;
    	height: 100px;
    	background: red;
    	position: absolute;
    }
    #div2{
    	 100px;
    	height: 100px;
    	background: yellow;
    	position: absolute;
    	left: 100px;
    }
    #div3{
    	 100px;
    	height: 100px;
    	background: blue;
    	position: absolute;
    	left: 200px;
    }
    

    JS

    /*
    组件开发:多组对象,像兄弟之间的关系(代码复用的一种形式)
    
    
     * */
    //拖拽
    function Drag(){
    	this.obj=null;
        this.disX=0;
        this.disY=0;
        
        this.settings={ //默认参数
        	toDown:function(){},
        	toUp:function(){}
        };
    }
    Drag.prototype.init=function(opt){
        var This=this;
       	this.obj=document.getElementById(opt.id);
       	extend(this.settings,opt);
        this.obj.onmousedown=function(ev){
            var ev=ev||window.event;
            This.fnDown(ev);
            
            This.settings.toDown();
            document.onmousemove=function(ev){
    	        var ev=ev||window.event; 
    	        This.fnMove(ev);
    	    };
    	    document.onmouseup=function(ev){
    	        var ev=ev||window.event; 
    	        This.fnUp(ev);
    	        
    	        This.settings.toUp();
    	    };
            //清除默认事件
            return false;
        }
    }
    Drag.prototype.fnDown=function(ev){
        var This=this;
        this.disX=ev.clientX-this.obj.offsetLeft;
        this.disY=ev.clientY-this.obj.offsetTop;
         
        //设置全局捕获
        //所有的onmousemove或者onmouseup都被oImg截获,然后作用在oImg身上
        if(this.obj.setCapture){
            this.obj.setCapture();
        }
         
        document.onmousemove=function(ev){
            var ev=ev||window.event; 
            This.fnMove(ev);
        };
        document.onmouseup=function(ev){
            var ev=ev||window.event; 
            This.fnUp(ev);
        };
    }
    Drag.prototype.fnMove=function(ev){
        var L=ev.clientX-this.disX;
        var T=ev.clientY-this.disY;
         
        this.obj.style.left=L+'px';
        this.obj.style.top=T+'px';
    }
    Drag.prototype.fnUp=function(){
        document.onmousemove=null;
        //释放全局捕获
        if(this.obj.releaseCapture){
            this.obj.releaseCapture();
        }
    }
    var dl=new Drag();
    dl.init({ //配置参数
    	id:'div1'
    });
    
    var d2=new Drag();
    d2.init({ //配置参数
    	id:'div2',
    	toDown:function(){
    		document.title='hello';
    	}
    });
    
    var d3=new Drag();
    d3.init({ //配置参数
    	id:'div3',
    	toDown:function(){
    		document.title='你好';
    	},
    	toUp:function(){
    		document.title='BeyBey';
    	}
    });
    
    function extend(obj1,obj2){
        for (var attr in obj2) {
            obj1[attr]=obj2[attr];
        }
    }
    

      

  • 相关阅读:
    opensuse tumbleweed中安装code
    树莓派中将caplock映射为esc键
    记录一次奇怪但是很有意义的程序编译警告
    新树莓派系统安装ROS记录
    程序的深挖
    intle官方手册下载
    slax linux的定制
    angular4 *ngFor获取index
    axios post传参后台无法接收问题
    AMD、CMD、CommonJs和 ES6对比
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8418018.html
Copyright © 2011-2022 走看看