寫在前面，初學者，共同進步 ，個人筆記分享

01

拖拽.gif

拖拽

網頁中經常需要div的拖動，這里寫的封裝的一個函數是無限制的拖拽，可以在子類中添加各種限制條件，完成拖拽。

02

• 面向對象的方法，構造函數里保存屬性，方法使用**函數名.prototype.方法名
  **
• ** disX與disY分別是鼠標與div**的橫向和縱向距離
• var _this = this; 解決了在后面的事件添加中，this的變化導致的錯誤
• 添加鼠標移動函數

/**
 * @constructor
 * @param {String} id = id為盒子div的id
 * @description 拖拽
 * @example 
 * var myDrag = new Drag('id'); 
 */
function Drag(id) {
    this.disX = 0;
    this.disY = 0;
    var _this = this;
    this.oDiv = document.getElementById(id);
    
    //鼠標按下事件
    this.oDiv.onmousedown = function() {
        _this.Down();
        //阻止默認事件
        return false;
    };  
}

03方法

鼠標按下

• 先記錄鼠標按下的位置與div之間的距離
• 在鼠標按下函數中綁定鼠標移動和抬起事件
• setCapture函數功能：一旦窗口捕獲了鼠標，所有鼠標輸入都針對該窗口，無論光標是否在窗口的邊界內。同一時刻只能有一個窗口捕獲鼠標。如果鼠標光標在另一個線程創建的窗口上，只有當鼠標鍵按下時系統才將鼠標輸入指向指定的窗口。 簡單來說，這里添加的意義就是在div上的事件，我們拖動div時，不會選中頁面的其他內容。

//鼠標按下函數
Drag.prototype.Down = function(ev) {
    var _this = this;
    var oEvent = ev || event;
    //在鼠標按下的時候記錄鼠標與div之間的橫向縱向距離
    this.disX = oEvent.clientX - _this.oDiv.offsetLeft;
    this.disY = oEvent.clientY - _this.oDiv.offsetTop;
    
    //事件綁定 解決拖動文字被選中的問題
    if (this.oDiv.setCapture) {
        //IE
        this.oDiv.onmousemove =function(){
            _this.fnMove(ev);
        };
        this.oDiv.onmouseup = function(){
            _this.fnUp(this);
        };
        this.oDiv.setCapture();
    } else{
        document.onmousemove = function(ev) {
            _this.fnMove(ev);
        };
        document.onmouseup = function() {
            _this.fnUp(this);       
        };
    }
}

鼠標移動與抬起

• 動態獲取鼠標的位置，根據鼠標按下時存儲的距離，計算div的位置，實時更新
• 鼠標抬起時釋放事件

//鼠標移動時根據鼠標的位置計算div的位置并實時更新位置
Drag.prototype.fnMove = function(ev) {
    var oEvent = ev || event;
    var left = oEvent.clientX - this.disX;
    var top = oEvent.clientY - this.disY;

    this.oDiv.style.left = left + 'px';
    this.oDiv.style.top = top + 'px';
}
//鼠標抬起來的時候釋放鼠標移動以及抬起事件
Drag.prototype.fnUp = function(oAttr) {
    oAttr.onmousemove = null;
    oAttr.onmouseup = null;
      //需要釋放捕獲的事件
    if (oAttr.releaseCapture) {
        oAttr.releaseCapture();
    }
}

04 使用

new Drag( );

• new一個實例
• 可以重寫父類的方法

05 封裝函數源碼與小例子

js文件可直接引用
Drag.js 框架下載
運用的例子