js实现拖拽效果

首先来了解一下，面向对象练习的基本规则和问题：

先写出普通的写法，然后改成面向对象写法项
普通方法变形

·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中

改成面向对象

·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题

先把拖拽效果的布局完善好：
HTML结构：

<div id="box"></div>

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;