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];
        }
    }
    

      

  • 相关阅读:
    练习:选择样条曲线中open的点
    练习:展平splineshape
    MAXScript调用DOTNET的OpenFileDialog
    练习:for循环
    MAXScript笔记_Function函数
    关于 MAXScript 拷贝文件夹及内容到其他位置
    关于逐行逐行读取文本内容并写入数组
    关于如何获取/清除 MAXScript 侦听器内的文本
    关于清除丢失贴图与IES文件
    关于 MAXScript 中文路径返回上级目录(精简版)
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8418018.html
Copyright © 2011-2022 走看看