構造函數模式實現拖拽效果

時間 2019-12-08

標籤構造函數模式實現效果简体版

原文原文鏈接

1、利用構造函數模式進行開發，有不少的好處：css

　　一、業務邏輯思路更清晰；html

　　二、避免了大量全局變量的產生，只有一個全局變量，至關於就是這一功能模塊向外暴露的惟一接口；瀏覽器

三、若是結合模塊化開發，很方便就能夠把自定義的模塊加到統一modules中，只要自定義的模塊名不衝突，使用起來也不會互相干擾；模塊化

四、代碼可維護性好，利人利己；函數

2、下面就利用這一模式，以拖拽爲實例，進行講解。this

　　一、html與css，以下：spa

<body>
　　<div class="box" id="box1"><div class="main"><div class="bar">拖拽區</div><div class="content">內容區塊</div></div></div>
　　<div class="box" id="box2"><div class="main"><div class="bar">拖拽區</div><div class="content">內容區塊</div></div></div>
　　<div class="box" id="box3"><div class="main"><div class="bar">拖拽區</div><div class="content">內容區塊</div></div></div>
</body>

<style type="text/css">
    .box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;}
    #box2{left:500px;}
    #box3{left:900px;  }
    .main{border:1px solid #a0b3d6;background-color: #fff;  }
    .bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;}
    .content{padding: 10px 5px;height:200px;width:250px;}
</style>

　　二、jsprototype

// 定義Drag構造函數，並設置每一個實例的特權屬性（也就是未來要建立的每一個實例對象私有的屬性）；
function Drag(bar, target) {
    // 此處的bar是指觸發拖拽事件的對象；
    this.bar = bar;

    // 此處的target是值實際上被拖動的對象；
    this.target = target;

    // 這個flag至關因而一個開關，用於判斷事件是否可以執行；
    this.flag = false;
}
// 構造函數原型上添加方法，也是爲其實例添加公用方法公用方法；
Drag.prototype = {
    // 從新聲明原型的constructor屬性，也就是爲實例指定正真的建立者；這裏不從新指定也沒問題，就是爲了。。。
    constructor : Drag,

    // 初始化每一個實例的屬性，爲綁定事件作好準備；
    init : function(){
        // 這邊的this實際上是指調用這個init函數方法的那個對象，也就是咱們所建立的實例；
        // 這麼寫有好處，代碼執行到綁定事件那一塊再詳細的講；
        var temp = this;

        // 獲取實例對象上最早設定的樣式值，這邊就是left和top屬性；
        temp.left = temp.getCss(temp.target, "left");
        temp.top = temp.getCss(temp.target, "top");

        // 預先聲明下面要用的到值，這邊是指儲存鼠標點下去的瞬間鼠標相對於屏幕的位置（clientX、clientY）
        temp.mousePosX = null;
        temp.mousePosY = null;

        // 發出爲實例對象綁定事件的命令；
        temp.bindEvent();
    },
    //
    getCss : function(o , prop){
        // Dom對象的style屬性指向的對象只能得到嵌入式樣式的值，好比<a style="..."></a>，這種寫在元素內部的能夠得到；
        // 可是經過外聯樣式表和內聯樣式表設置的樣式值，只能經過如下方法得到，currentStyle對應的是Ie，另外一個對應的是其餘瀏覽器；
        return o.currentStyle ? o.currentStyle[prop] : document.defaultView.getComputedStyle(o, null)[prop];
    },
    bindEvent : function(){
        // 先把調用這個bindEvent方法的this對象（也就是咱們建立的實例對象）傳遞給temp變量，因而temp也就指向了實例對象；
        // 所以，在當前函數的執行環境內，想要調用這個實例對象，而沒必要要使用this了，由於此時的this可能指向的其餘的對象；
        // 好比，在爲某個對象綁定事件的時候，這個事件內部的this確定是指向綁定的對象的，而不是咱們想要的最開始的那個「this」
        var temp = this;

        // 監聽鼠標點下的事件函數
        temp.bar.onmousedown = function(e){
            // 這邊的e是指事件對象，老Ie不能直接使用，得經過window.event來引用；
            e = e || window.event;

            // 點下的瞬間就把這個開關打開，代表如今能夠拖動了；
            temp.flag = true;

            // 獲取鼠標相對與瀏覽器窗口的位置，而且賦值給實例對象的mousePos屬性；
            temp.mousePosX = e.clientX;
            temp.mousePosY = e.clientY;
        };

        // 監聽鼠標移動事件，注意這個綁定到document對象上的事件，由於鼠標在整個文檔上移動；
        // 這邊不能用onmousemove方法綁定事件，由於咱們的實例可能有多個，若是用次方法，最後初始化的那個實例才綁定到事件函數；
        document.addEventListener('mousemove' ,function(e){
            e = e || window.event;

            // 由於在鼠標點下的時候，已經指定flag爲true了，因此下面的代碼纔會執行；
            // 若是沒有這個開關控制，咱們移動鼠標的時候，咱們建立的實例對象都要移動；
            if(temp.flag){

                // （e.clientX - temp.mousePosX）表明了鼠標自按下後滑動的距離；
                //  parseInt(temp.left)是指鼠標還沒滑動時，被拖動對象的初始位置；
                temp.target.style.left = parseInt(temp.left) + e.clientX - temp.mousePosX + "px";
                temp.target.style.top = parseInt(temp.top) + e.clientY - temp.mousePosY + "px";
            }
        });

        // 鼠標放開後事件
        document.addEventListener('mouseup', function(e){
            // 鼠標放開後，就把這個開關了，就說明拖動對象不能被拖動了；
            temp.flag = false;

            // 記錄被拖動對象的被拖動後的位置
            temp.left = temp.getCss(temp.target, "left");
            temp.top = temp.getCss(temp.target, "top");
        });
    }
}

// 獲取Dom元素，oBar是指拖動條，oBox是指實際上拖拽對象；
var oBox = document.getElementsByClassName('box');
var oBar = document.getElementsByClassName('bar');
// 建立實例對象，注意參數順序；
var drag1 = new Drag(oBar[0], oBox[0]);
var drag2 = new Drag(oBar[1], oBox[1]);
var drag3 = new Drag(oBar[2], oBox[2]);
// 調用實例對象上的init方法，爲實例對象指定設計好的操做流程；
drag1.init();
drag2.init();
drag3.init();

3、具體的過程都經過js註釋說明了，歡迎指出錯誤和要改進的地方；設計