JS拖拽-面向对象拖拽-继承

  //普通拖拽
  /*
  *   CSS
  */
 #div1{ width: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{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
 #div2{ width: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{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
 #div2{ width: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;
 }