js實作拖曳效果_javascript技巧

先來了解一下，物件導向練習的基本規則和問題：

先寫出普通的寫法，再改成物件導向寫法項
普通方法變形

·盡量不要出現函數巢狀函數
·可以有全域變數
·把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物件只出現在事件裡面，所以寫方法的時候要注意一下！