通过按住鼠标拖动的例子来演示面向对象的过程

css部分

#box1{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 0;
top:0;
}

HTML部分

<div id="box1"></div>

JS部分

// 面向过程1
// 写出实现逻辑
// var oBox = document.getElementById('box1');

// oBox.onmousedown = function(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var distX = ev.clientX-this.offsetLeft;
// var distY = ev.clientY-this.offsetTop;

// document.onmousemove = function(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var newX = ev.clientX;
// var newY = ev.clientY;
// oBox.style.left = newX-distX+"px";
// oBox.style.top = newY-distY+"px";
// }
// document.onmouseup = function(){
// this.onmousedown = null;
// this.onmousemove = null;
// }
// }

// 面向过程2
// 写成函数形式
// window.onload = function(){
// oBox = document.getElementById('box1');
// oBox.onmousedown = fnDown;
// }

// function fnDown(e){
// var ev = e || window.event;
// ev.stopPropagation();
// distX = ev.clientX-this.offsetLeft;
// distY = ev.clientY-this.offsetTop;
// document.onmousemove = fnMove;
// document.onmouseup = fnUp;
// }
// function fnMove(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var newX = ev.clientX;
// var newY = ev.clientY;
// oBox.style.left = newX-distX+"px";
// oBox.style.top = newY-distY+"px";
// }
// function fnUp(){
// this.onmousedown = null;
// this.onmousemove = null;
// }
// 面向过程3
// 在函数内部通过不加var设置全局变量不好，就把全局变量提到最顶端。
// 只是为了定义一些全局变量，目前还没有值，就用null或0初始化值。
// var oBox = null;
// var distX = 0;
// var distY = 0;
// window.onload = function(){
// oBox = document.getElementById('box1');
// oBox.onmousedown = fnDown;
// }
// function fnDown(e){
// var ev = e || window.event;
// ev.stopPropagation();
// distX = ev.clientX-this.offsetLeft;
// distY = ev.clientY-this.offsetTop;
// document.onmousemove = fnMove;
// document.onmouseup = fnUp;
// // console.log(this);
// }
// function fnMove(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var newX = ev.clientX;
// var newY = ev.clientY;
// oBox.style.left = newX-distX+"px";
// oBox.style.top = newY-distY+"px";
// }
// function fnUp(){
// this.onmousedown = null;
// this.onmousemove = null;
// // console.log(this);
// }

// 转化成面向对象
// 1.全局变量转换为Drag的属性，在前面加this，this指向Drag。
// 2.若onmousedown直接=fnDown，fnDown中的this就是指向this.oBox，而非Drag。
// fnDown为Drag的方法，它的this必须指向Drag。把Drag的this赋值给_this，就可
// 在onmousedown后建立匿名函数function(){},调用Drag的fnDown方法，即_this.fnDown()。
// 3.同理通过var _this = this，把Drag的fnMove,fnUp方法的this指向摆正。
// 4.之前fnDown是oBox调用的，里面的this.offsetLeft，指向oBox，现在就要变成this.oBox。
// 之前fnUp是document调用的，里面的this指向document，现this指向是Drag，就要把this变成document。

// 注：实验表明，不以原型的方式定义函数，单用this把各方法与Drag绑到一块不起作用，

function Drag(id){
this.oBox = document.getElementById(id);
this.distX = 0;
this.distY = 0;
var _this = this;
this.oBox.onmousedown = function(){
_this.fnDown();
}
}
Drag.prototype.fnDown = function(e){
var ev = e || window.event;
ev.stopPropagation();
this.distX = ev.clientX-this.oBox.offsetLeft;
this.distY = ev.clientY-this.oBox.offsetTop;
var _this = this;
document.onmousemove = function(){
_this.fnMove();
}
document.onmouseup = function(){
_this.fnUp();
}
}
Drag.prototype.fnMove = function(e){
var ev = e || window.event;
ev.stopPropagation();
var newX = ev.clientX;
var newY = ev.clientY;
this.oBox.style.left = newX-this.distX+"px";
this.oBox.style.top = newY-this.distY+"px";
}
Drag.prototype.fnUp = function(){
document.onmousedown = null;
document.onmousemove = null;
}
window.onload = function(){
var drag1 = new Drag("box1");
}