欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2015年02月12日 16:18:02   投稿:hebedich  
本文主要是為了讓大家更好的理解js的面向?qū)ο螅ㄟ^實(shí)現(xiàn)拖拽效果向大家展示js面向?qū)ο?,非常不錯(cuò),這里推薦給大家。

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

先寫出普通的寫法,然后改成面向?qū)ο髮懛?xiàng)
普通方法變形

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

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

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

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

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

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

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

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

window.onload = function (){
    // 獲取元素和初始值
    var oBox = document.getElementById('box'),
        disX = 0, disY = 0;
    // 容器鼠標(biāo)按下事件
    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);
        // 阻止默認(rèn)事件
        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)建一個(gè)對象:

復(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);
        // 阻止默認(rèn)事件
        return false;
    };
};

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

接著是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(shí)候要注意一下event對象。因?yàn)閑vent對象只出現(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)在事件里面,所以寫方法的時(shí)候要注意一下!

相關(guān)文章

  • Phaser.js實(shí)現(xiàn)簡單的跑酷游戲附源碼下載

    Phaser.js實(shí)現(xiàn)簡單的跑酷游戲附源碼下載

    這篇文章主要介紹了Phaser.js實(shí)現(xiàn)簡單的跑酷游戲附源碼下載,需要的朋友可以參考下
    2018-10-10
  • 用方法封裝javascript的new操作符(一)

    用方法封裝javascript的new操作符(一)

    雖然js是基于對象的,但在很多時(shí)候會(huì)使用到new這個(gè)操作符。
    2010-12-12
  • js實(shí)現(xiàn)加載更多功能實(shí)例

    js實(shí)現(xiàn)加載更多功能實(shí)例

    這篇文章主要介紹了js實(shí)現(xiàn)加載更多功能的方法,以實(shí)例演示了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2016-10-10
  • js實(shí)現(xiàn)無縫滾動(dòng)圖(可控制當(dāng)前滾動(dòng)的方向)

    js實(shí)現(xiàn)無縫滾動(dòng)圖(可控制當(dāng)前滾動(dòng)的方向)

    本文主要分享了js實(shí)現(xiàn)無縫滾動(dòng)圖的示例代碼,這個(gè)版本可以控制左右滾動(dòng),鼠標(biāo)點(diǎn)擊對應(yīng)的廣告會(huì)自動(dòng)滑動(dòng)把廣告完全展示出來,當(dāng)鼠標(biāo)離開,接著繼續(xù)滾動(dòng)。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • JS實(shí)現(xiàn)單例模式的6種方案匯總

    JS實(shí)現(xiàn)單例模式的6種方案匯總

    單例模式的定義是保證一個(gè)類僅有一個(gè)實(shí)例,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)單例模式的6種方案,需要的朋友可以參考下
    2021-05-05
  • 最新評論