面向对象div拖拽

HTML

<div id="div"></div>

CSS

#div{
	width: 50px;
	height: 50px;
	background: red;
	position: absolute;
	left: 0;
	top: 0;
}

JS

/*oDiv.οnmοusedοwn=function(ev){
    var ev=ev||event;
           
    var disX=ev.clientX-this.offsetLeft;
    var disY=ev.clientY-this.offsetTop;
         
    //设置全局捕获
    //所有的onmousemove或者onmouseup都被oImg截获，然后作用在oImg身上
    if(oDiv.setCapture){
        oDiv.setCapture();
    }
         
    document.οnmοusemοve=function(ev){
        var ev=ev||event;
             
        var L=ev.clientX-disX;
        var T=ev.clientY-disY;
             
        //限制拖拽范围
        //横向
        if(L<0){
            L=0;
        }else if(L>document.documentElement.clientWidth-oDiv.offsetWidth){
            L=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        //纵向
        if(T<0){
            T=0;
        }else if(T>document.documentElement.clientHeight-oDiv.offsetHeight){
            T=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
             
        oDiv.style.left=L+'px';
        oDiv.style.top=T+'px';
    }
         
    document.οnmοuseup=function(){
        document.οnmοusemοve=null;
        //释放全局捕获
        if(oDiv.releaseCapture){
            oDiv.releaseCapture();
        }
    }
         
    //清除默认事件
    return false;
}*/

//过程改为面向对象
//函数就是方法
//onload中创建对象
 
//全局变量就是属性
/*var oDiv=null;
var disX=0;
var disY=0;
init();
function init(){
	oDiv=document.getElementById('div');
	oDiv.οnmοusedοwn=fnDown;
}
function fnDown(ev){
	var ev=ev||event;     
    disX=ev.clientX-this.offsetLeft;
    disY=ev.clientY-this.offsetTop;
         
    //设置全局捕获
    //所有的onmousemove或者onmouseup都被oImg截获，然后作用在oImg身上
    if(oDiv.setCapture){
        oDiv.setCapture();
    }
         
    document.οnmοusemοve=fnMove;
         
    document.οnmοuseup=fnUp
         
    //清除默认事件
    return false;
}
function fnMove(ev){
	var ev=ev||event;     
    var L=ev.clientX-disX;
    var T=ev.clientY-disY;
             
    //限制拖拽范围
    //横向
    if(L<0){
        L=0;
    }else if(L>document.documentElement.clientWidth-oDiv.offsetWidth){
        L=document.documentElement.clientWidth-oDiv.offsetWidth;
    }
    //纵向
    if(T<0){
        T=0;
    }else if(T>document.documentElement.clientHeight-oDiv.offsetHeight){
        T=document.documentElement.clientHeight-oDiv.offsetHeight;
    }
             
    oDiv.style.left=L+'px';
    oDiv.style.top=T+'px';
}
function fnUp(){
	document.οnmοusemοve=null;
    //释放全局捕获
    if(oDiv.releaseCapture){
        oDiv.releaseCapture();
    }
}*/

//改面向对象
function Drag(id){
	this.oDiv=document.getElementById(id);
	this.disX=0;
	this.disY=0;
}
Drag.prototype.init=function(){
	var This=this;
//	alert(this.oDiv);
	this.oDiv.οnmοusedοwn=function(ev){
		var ev=ev||window.event;
		This.fnDown(ev);
		//清除默认事件
    	return false;
	};
}

Drag.prototype.fnDown=function(ev){
	var This=this;
    this.disX=ev.clientX-this.oDiv.offsetLeft;
    this.disY=ev.clientY-this.oDiv.offsetTop;
         
    //设置全局捕获
    //所有的onmousemove或者onmouseup都被oImg截获，然后作用在oImg身上
    if(this.oDiv.setCapture){
        this.oDiv.setCapture();
    }
         
    document.οnmοusemοve=function(ev){
    	var ev=ev||window.event;   
    	This.fnMove(ev);
    };
    document.οnmοuseup=function(ev){
    	var ev=ev||window.event;   
    	This.fnUp(ev);
    };
}
Drag.prototype.fnMove=function(ev){    
    this.L=ev.clientX-this.disX;
    this.T=ev.clientY-this.disY;
             
    //限制拖拽范围
    //横向
    if(this.L<0){
        this.L=0;
    }else if(this.L>document.documentElement.clientWidth-this.oDiv.offsetWidth){
        this.L=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }
    //纵向
    if(this.T<0){
        this.T=0;
    }else if(this.T>document.documentElement.clientHeight-this.oDiv.offsetHeight){
        this.T=document.documentElement.clientHeight-this.oDiv.offsetHeight;
    }
             
    this.oDiv.style.left=this.L+'px';
    this.oDiv.style.top=this.T+'px';
}
Drag.prototype.fnUp=function(){
	document.οnmοusemοve=null;
    //释放全局捕获
    if(this.oDiv.releaseCapture){
        this.oDiv.releaseCapture();
    }
}

var dl=new Drag('div');
dl.init();

　　

转载于:https://www.cnblogs.com/yangxue72/p/8385582.html