和上一篇的面向对象的选项卡差不多,先将面向过程的拖拽改写成面向对象的拖拽,然后再加上继承就好了。
面向过程的拖拽:
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.οnmοusedοwn=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=function(ev){
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
}
</script>
面向对象的拖拽:
<script type="text/javascript">
window.οnlοad=function(){
new Drag('div1');
};
function Drag(id){
var _this=this;
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById(id);
this.oDiv.οnmοusedοwn=function(ev){
_this.fnDown(ev);
};
}
Drag.prototype.fnDown=function (ev){
var _this=this;
var oEvent=ev||event;
this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop;
document.οnmοusemοve=function(ev){
_this.fnMove(ev);
};
document.οnmοuseup=function(){
_this.fnDown(this);
};
}
Drag.prototype.fnMove=function (ev){
var oEvent=ev||event;
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';
}
Drag.prototype.fnUp=function (){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
</script>
继承:继承父类的属性和方法。
属性通过call来继承,原型通过一个for循环来实现继承。
如下:
function LimitDrag(id){
Drag.call(this,id); //继承父类Drag
};
for(var i in Drag.prototype){
LimitDrag.prototype[i]=Drag.prototype[i];
}
LimitDrag.prototype.fnMove=function (ev){ //将父类fnMove重写(会把原来的覆盖从而生成子类新的特性——限制范围)。
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;
}
this.oDiv.style.left=l+'px';
this.oDiv.style.top=t+'px';
};
谈谈系统对象:
1,宿主对象:由浏览器提供的对象。(通常是DOM,BOM。但是Node.js不一样了,它是在后台编写JS,所以它有一套新的宿主对象,而不再是DOM,BOM了)
2,本地对象(与内置对象都是JS本身所具有的,没得的话就不叫JS了)
即非静态对象,常用:Object,Function,Date,Array,String,Boolean,Number,RegExp
3,内置对象
即静态对象,Global与Math
Global:仅存在于概念里,用来让全局变量什么的进行归属,不能使用。
Math:直接能用,不需要实例化。