js實現(xiàn)拖拽效果

更新時間：2015年02月12日 16:18:02 投稿：hebedich

本文主要是為了讓大家更好的理解js的面向?qū)ο?，通過實現(xiàn)拖拽效果向大家展示js面向?qū)ο?，非常不錯，這里推薦給大家。

首先來了解一下，面向?qū)ο缶毩?xí)的基本規(guī)則和問題：

先寫出普通的寫法，然后改成面向?qū)ο髮懛?br /> 普通方法變形

·盡量不要出現(xiàn)函數(shù)嵌套函數(shù)
·可以有全局變量
·把onload函數(shù)中不是賦值的語句放到單獨函數(shù)中

改成面向?qū)ο?/p>

·全局變量就是屬性
·函數(shù)就是方法
·onload中創(chuàng)建對象
·改this指針問題

先把拖拽效果的布局完善好：
HTML結(jié)構(gòu)：

csc樣式：
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步，首先把面向過程的拖拽回顧一下

復(fù)制代碼代碼如下:

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;

    };

};

第二步，把面向過程改寫為面向?qū)ο?/p>

復(fù)制代碼代碼如下:

window.onload = function (){

    var drag = new Drag('box');

    drag.init();

};

// 構(gòu)造函數(shù)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;

};

第三步，看看代碼有哪些不一樣

首頁使用了構(gòu)造函數(shù)來創(chuàng)建一個對象：

復(fù)制代碼代碼如下:

// 構(gòu)造函數(shù)Drag

function Drag(id){

    this.obj = document.getElementById(id);

    this.disX = 0;

    this.disY = 0;

}

遵守前面的寫好的規(guī)則，把全局變量都變成屬性！

然后就是把函數(shù)都寫在原型上面：

復(fù)制代碼代碼如下:

Drag.prototype.init = function (){

};

Drag.prototype.mouseDown = function (){

};

Drag.prototype.mouseMove = function (){

};

Drag.prototype.mouseUp = function (){

};

先來看看init函數(shù)：

復(fù)制代碼代碼如下:

Drag.prototype.init = function (){

    // this指針

    var me = this;

    this.obj.onmousedown = function (e){

        var e = e || event;

        me.mouseDown(e);

        // 阻止默認事件

        return false;

    };

};

我們使用me變量來保存了this指針，為了后面的代碼不出現(xiàn)this指向的錯誤

接著是mouseDown函數(shù):

復(fù)制代碼代碼如下:

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();

    }

};

改寫成面向?qū)ο蟮臅r候要注意一下event對象。因為event對象只出現(xiàn)在事件中，所以我們要把event對象保存變量，然后通過參數(shù)傳遞！

后面的mouseMove函數(shù)和mouseUp函數(shù)就沒什么要注意的地方了！

要注意的問題

關(guān)于this指針的問題，面向?qū)ο罄锩鎡his特別重要！
this拓展閱讀:
http://div.io/topic/809

關(guān)于event對象的問題，event對象只出現(xiàn)在事件里面，所以寫方法的時候要注意一下！

您可能感興趣的文章: