JS拖拽面向对象拖拽继承

 //普通拖拽
 /*
 *   CSS   
 */
#div1{ 100px; height:100px; position:absolute; background:red; cursor:move;}

/*
*HTML
*/
<div id="div1"></div>


/*
*JavaScript
*/
window.onload = function (){
    var oDiv = document.getElementById("div1");
    oDiv.onmousedown = function(ev){
        var oEvent = ev || event;    //事件处理函数  ev是FF
        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;
        doucment.onmousemove = function (ev){
            var oEvent = ev || event;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            oDiv.style.left = l + "px";
            oDiv.style.top = t + "px";
            document.title = l + " , " + t;    //坐标
            return false;    //阻止火狐默认事件
        }
        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
}

---

//面向对象拖拽
/*
*CSS
*/
#div1{ 100px; height:100px; position:absolute; background:red; cursor:move;}
#div2{ 100px; height:100px; position:absolute; background:yellow; cursor:pointer;}

/*
*HTML
*/
<div id="div1"></div>
<div id="div2"></div>

/*
*Javascript
*/
window.onload = function (){

    new Darg("div1");
    new Darg("div2");

}
function Darg(id){
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function (ev){
        _this.ondown(ev);
    }
}
Darg.prototype.ondown = function(ev){
    var _this = this;
    var oEvent = ev || event;
    this.disX = oEvent.clientX - this.oDiv.offsetLeft;
    this.disY = oEvent.clientY - this.oDiv.offsetTop;
    document.onmousemove = function (ev){
        _this.onmove(ev);
    }
    document.onmouseup = function (){
        _this.onup();
    }
}
Darg.prototype.onmove = function(ev){
    var oEvent = ev || event;
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY;
    this.oDiv.style.left = l + "px";
    this.oDiv.style.top = t + "px";
    document.title = l + " , " + t;    
    return false;
}
Darg.prototype.onup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
}

---

//面向对象拖拽-继承
/*
*CSS
*/
#div1{ 100px; height:100px; position:absolute; background:red; cursor:move;}
#div2{ 100px; height:100px; position:absolute; background:yellow; cursor:pointer;}

/*
*HTML
*/
<div id="div1"></div>
<div id="div2"></div>

/*
*Javascript
*/
window.onload = function (){

    new Darg("div1");
    new extendsDarg("div2");
    
}
//面向对象拖拽开始
function Darg(id){
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function (ev){
        _this.ondown(ev);
    }
}
Darg.prototype.ondown = function(ev){
    var _this = this;
    var oEvent = ev || event;
    this.disX = oEvent.clientX - this.oDiv.offsetLeft;
    this.disY = oEvent.clientY - this.oDiv.offsetTop;
    document.onmousemove = function (ev){
        _this.onmove(ev);
    }
    document.onmouseup = function (){
        _this.onup();
    }
}
Darg.prototype.onmove = function(ev){
    var oEvent = ev || event;
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY;
    this.oDiv.style.left = l + "px";
    this.oDiv.style.top = t + "px";
    document.title = l + " , " + t;    
    return false;
}
Darg.prototype.onup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
}
//面向对象拖拽结束

//这里开始继承
function extendsDarg(id){
        Darg.call(this,id);  
}
for(i in Darg.prototype){
        extendsDarg.prototype[i] = Darg.prototype[i];
}
extendsDarg.prototype.onmove = function(ev){
    var oEvent = ev || event;
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY;
    if(l<0){
      l = 0;
    }else if(l>document.documentElement.clientWidth - this.oDiv.offsetWidth){
      l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
    }
    if(t<0){
      t = 0;
    }else if(t>document.documentElement.clientHeight - this.oDiv.offsetHeight){
      t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
    }
    this.oDiv.style.left = l + "px";
    this.oDiv.style.top = t + "px";
    document.title = l + " , " + t;    
    return false;
}