物件導向div拖拽

html

css

#div

js

/*odiv.onmousedown=function(ev)

document.onmousemove=function(ev)else if(l>document.documentelement.clientwidth-odiv.offsetwidth)
//縱向
if(t<0)else if(t>document.documentelement.clientheight-odiv.offsetheight)
odiv.style.left=l+'px';
odiv.style.top=t+'px';
}document.onmouseup=function()
}//清除預設事件
return false;
}*///過程改為物件導向
//函式就是方法
//onload中建立物件
//全域性變數就是屬性
/*var odiv=null;
var disx=0;
var disy=0;
init();
function init()
function fndown(ev)
document.onmousemove=fnmove;
document.onmouseup=fnup
//清除預設事件
return false;
}function fnmove(ev)else if(l>document.documentelement.clientwidth-odiv.offsetwidth)
//縱向
if(t<0)else if(t>document.documentelement.clientheight-odiv.offsetheight)
odiv.style.left=l+'px';
odiv.style.top=t+'px';
}function fnup()
}*///改物件導向
function drag(id)
drag.prototype.init=function();
}drag.prototype.fndown=function(ev)
document.onmousemove=function(ev);
document.onmouseup=function(ev);
}drag.prototype.fnmove=function(ev)else if(this.l>document.documentelement.clientwidth-this.odiv.offsetwidth)
//縱向
if(this.t<0)else if(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()
}var dl=new drag('div');
dl.init();

js物件導向拖拽

drag.js實現拖拽，沒有控制邊界，使用draglimit.js繼承drag.js再實現了邊界控制drag.html draj.js 物件導向拖拽 param id 拖拽目標div的id function drag id 滑鼠按下 drag.prototype.fndown function ev...

物件導向 拖拽與繼承

面向過程的拖拽 物件導向的拖拽 繼承 繼承父類的屬性和方法。屬性通過call來繼承，原型通過乙個for迴圈來實現繼承。如下 function limitdrag id for var i in drag.prototype limitdrag.prototype.fnmove function ev...

拖拽的物件導向寫法

上面是面向過程的寫法，而下面將講解如果寫物件導向的寫法，物件導向其實就是建立乙個建構函式，把執行函式寫到原型上面，然後可以通過建立例項物件的方法可以實現重複的呼叫。1.首先，建立出乙個建構函式，然後將出現的函式，從最裡面的執行函式依次寫到原型上，不可以出現函式巢狀，在最外層的函式裡面呼叫裡面的函式，...