首先来了解一下，面向对象练习的基本规则和问题：
先写出普通的写法，然后改成面向对象写法项
普通方法变形
·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中
改成面向对象
·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题
先把拖拽效果的布局完善好：
html结构：
csc样式：
#box{position: absolute;width: 200px;height: 200px;background: red;}
第一步，首先把面向过程的拖拽回顾一下
复制代码 代码如下:
window.onload = function (){
    // 获取元素和初始值
    var obox = document.getelementbyid('box'),
        disx = 0, disy = 0;
    // 容器鼠标按下事件
    obox.onmousedown = function (e){
        var e = e || window.event;
        disx = e.clientx - this.offsetleft;
        disy = e.clienty - this.offsettop;
        document.onmousemove = function (e){
            var e = e || window.event;
            obox.style.left = (e.clientx - disx) + 'px';
            obox.style.top = (e.clienty - disy) + 'px';
        };
        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
};
第二步，把面向过程改写为面向对象
复制代码 代码如下:
window.onload = function (){
    var drag = new drag('box');
    drag.init();
};
// 构造函数drag
function drag(id){
    this.obj = document.getelementbyid(id);
    this.disx = 0;
    this.disy = 0;
}
drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mousedown(e);
        // 阻止默认事件
        return false;
    };
};
drag.prototype.mousedown = function (e){
    // this指针
    var me = this;
    this.disx = e.clientx - this.obj.offsetleft;
    this.disy = e.clienty - this.obj.offsettop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mousemove(e);
    }; 
    document.onmouseup = function (){
        me.mouseup();
    }
};
drag.prototype.mousemove = function (e){
    this.obj.style.left = (e.clientx - this.disx) + 'px';
    this.obj.style.top = (e.clienty - this.disy) + 'px';
};
drag.prototype.mouseup = function (){
    document.onmousemove = null;
    document.onmouseup = null;
};
第三步，看看代码有哪些不一样
首页使用了构造函数来创建一个对象：
复制代码 代码如下:
// 构造函数drag
function drag(id){
    this.obj = document.getelementbyid(id);
    this.disx = 0;
    this.disy = 0;
}
遵守前面的写好的规则，把全局变量都变成属性！
然后就是把函数都写在原型上面：
复制代码 代码如下:
drag.prototype.init = function (){
};
drag.prototype.mousedown = function (){
};
drag.prototype.mousemove = function (){
};
drag.prototype.mouseup = function (){
};
先来看看init函数：
复制代码 代码如下:
drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mousedown(e);
        // 阻止默认事件
        return false;
    };
};
我们使用me变量来保存了this指针，为了后面的代码不出现this指向的错误
接着是mousedown函数:
复制代码 代码如下:
drag.prototype.mousedown = function (e){
    // this指针
    var me = this;
    this.disx = e.clientx - this.obj.offsetleft;
    this.disy = e.clienty - this.obj.offsettop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mousemove(e);
    }; 
    document.onmouseup = function (){
        me.mouseup();
    }
};
改写成面向对象的时候要注意一下event对象。因为event对象只出现在事件中，所以我们要把event对象保存变量，然后通过参数传递！
后面的mousemove函数和mouseup函数就没什么要注意的地方了！
要注意的问题
关于this指针的问题，面向对象里面this特别重要！
this拓展阅读:
http://div.io/topic/809
关于event对象的问题，event对象只出现在事件里面，所以写方法的时候要注意一下！