面象对象(一)
/**
window.onload = function() {
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(ev) {
var ev = ev || window.event;
disX = (ev.clientX + document.documentElement.scrollLeft||document.body.scrollLeft) - oDiv.offsetLeft;
disY = (ev.clientY + document.documentElement.scrollTop||document.body.scrollTop) - oDiv.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || window.event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
};**/
/* 面向对象注意事项1:this的指向永远指向对象Drag属性
* 2:事件对象指向是否指向对应方法
* 3:函数嵌套函数要分离
* 4:对象里面写属性
* 5:prototype写方法
* 6:有初始化init();
* 7:在window.onload new对象
*
* */
window.onload=function(){
var drag=new Drag('div1');
drag.init();
}
function Drag(id){
this.oDiv = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
Drag.prototype.init=function(){
var This=this;
this.oDiv.onmousedown=function(ev){
var ev = ev || window.event;
This.fnDown(ev);
return false;
};
}
Drag.prototype.fnDown=function(ev){
var ev = ev || window.event;
var This=this;
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove=function(ev){
var ev = ev || window.event;
This.fnMove(ev);
};
document.onmouseup=function(){
This.fnUp();
};
};
Drag.prototype.fnMove=function(ev){
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp=function(){
document.onmousemove = null;
document.onmouseup = null;
}