//普通拖拽

  /*

  *   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;

 }