面向对象组件开发-拖拽

Posted 2020-10-23 carol72

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

CSS

#div1{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
}
#div2{
	width: 100px;
	height: 100px;
	background: yellow;
	position: absolute;
	left: 100px;
}
#div3{
	width: 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];
    }
}