drag.js實現拖拽，沒有控制邊界，使用draglimit.js繼承drag.js再實現了邊界控制
drag.html
draj.js
/**
* 物件導向拖拽
* @param [id] [拖拽目標div的id]
*/function drag(id)
}// 滑鼠按下
drag.prototype.fndown=function(ev)
document.onmouseup=function()
}// 滑鼠移動
drag.prototype.fnmove=function(ev)
// 滑鼠抬起
drag.prototype.fnup=function()
draglimit.js
/**
* 限制邊界的拖拽，繼承自drag
* @param [id] [description]
*/function draglimit(id)
// 繼承方法
for(var p in drag.prototype)
/** * 覆寫父類的滑鼠移動方法，控制不能移出邊界
*/draglimit.prototype.fnmove=function(ev)else if(left>document.documentelement.clientwidth-this.obox.offsetwidth)
if(top<0)else if(top>document.documentelement.clientheight-this.obox.offsetheight)
this.obox.style.left=left+'px';
this.obox.style.top=top+'px';
}
物件導向div拖拽
html css div js odiv.onmousedown function ev document.onmousemove function ev else if l document.documentelement.clientwidth odiv.offsetwidth 縱向 if t ...
物件導向 拖拽與繼承
面向過程的拖拽 物件導向的拖拽 繼承 繼承父類的屬性和方法。屬性通過call來繼承，原型通過乙個for迴圈來實現繼承。如下 function limitdrag id for var i in drag.prototype limitdrag.prototype.fnmove function ev...
拖拽的物件導向寫法
上面是面向過程的寫法，而下面將講解如果寫物件導向的寫法，物件導向其實就是建立乙個建構函式，把執行函式寫到原型上面，然後可以通過建立例項物件的方法可以實現重複的呼叫。1.首先，建立出乙個建構函式，然後將出現的函式，從最裡面的執行函式依次寫到原型上，不可以出現函式巢狀，在最外層的函式裡面呼叫裡面的函式，...