摘要：說明你可能發(fā)現(xiàn)有很多網(wǎng)站他們的登錄窗口或者說是登錄框是可以拖動的更有甚者他們的站點提示框都可以拖動你也許可能會對這個功能的實現(xiàn)感興趣那么這篇文章可能會對你有所幫助具體的網(wǎng)站示例以網(wǎng)易云音樂站點為例，具體效果如下圖所示實現(xiàn)登錄窗口的拖拽原理解

你可能發(fā)現(xiàn)有很多網(wǎng)站他們的登錄窗口或者說是登錄框是可以拖動的, 更有甚者他們的站點提示框都可以拖動, 你也許可能會對這個功能的實現(xiàn)感興趣, 那么這篇文章可能會對你有所幫助！具體的網(wǎng)站示例以 網(wǎng)易云音樂 Web站點為例，具體效果如下圖所示:

預(yù)先假設(shè)要實現(xiàn)的登錄框允許點擊鼠標(biāo)獲取拖拽事件的具體位置就是登錄框的標(biāo)題區(qū)塊也就是下圖所示登錄區(qū)塊黑色部分在文章中以 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 說明問題, 并且假定 紅色十字 圖標(biāo)就是鼠標(biāo)狀態(tài):

當(dāng)鼠標(biāo)在 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 點擊鼠標(biāo)時觸發(fā) onmousedown 事件

獲取鼠標(biāo)在 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 點擊時的具體位置

當(dāng)鼠標(biāo)移動時改變 登錄窗口 左上角位置(也是就是坐標(biāo)點位置)距離頁面可視區(qū)左上角位置, 那么這個 登錄窗口 也就移動了, 也就實現(xiàn)了 登錄窗口 的拖拽功能

當(dāng)鼠標(biāo)移動時觸發(fā) onmousemove 事件

當(dāng)鼠標(biāo)抬起時, 觸發(fā) onmouseup 事件

釋放 onmousemove 事件

釋放 onmouseup 事件自身

以上過程就是一個完整的 登錄窗口 拖拽的過程, 不過要注意以下幾點:

拖拽移動 登錄窗口 時為 document 綁定 onmousemove 事件, 而不是 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域

為什么這樣做呢? 如果只是為 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 綁定 onmousemove 件事, 當(dāng)鼠標(biāo)移動的快了就會導(dǎo)致事件綁定丟失, 不過你可以去驗證

下圖是將 onmousemove 綁定到 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 這樣其是不對的！

下圖是將 onmousemove 綁定到 document 上的事件, 這樣才是最完美的, 因為你不管怎么拖它都不會丟失事件綁定

抬起鼠標(biāo)時同樣也是為 document 綁定 onmouseup 事件, 而不是 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域

為什么呢？如果只是為 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 綁定 onmouseup 事件, 你會發(fā)現(xiàn)當(dāng)鼠標(biāo)移動到脫離文檔可視區(qū)域時，抬起點擊的鼠標(biāo)按鍵你會發(fā)現(xiàn)當(dāng)再一次移動鼠標(biāo)時它依然可以移動這就不符合常理了不是嘛！那就給 document 綁定 onmouseup 事件時，它就可以很好的解決這個怪異的問題！

下圖是將 onmouseup 綁定到 允許點擊鼠標(biāo)獲取拖拽事件區(qū)域 這樣其是不對的！

下圖是將 onmouseup 綁定到 document 上的事件, 這樣才是最完美的

不過你會發(fā)現(xiàn)拖不回來了, 這是問題也是后面要說的優(yōu)化問題, 先留一坑，一會填坑時再說！

    
    
    
    


    
    

        

            登錄
            X
        
    

以上就是以一個簡單的DIV模擬 登錄窗口 實現(xiàn)的一個簡單拖拽過程

你可能已經(jīng)發(fā)現(xiàn)了這個 登錄窗口 與 網(wǎng)易云音樂 最大的區(qū)別在于它可以拖拽出文檔可視區(qū)域, 它甚至可以拖拽到文檔不可見區(qū)域, 那就永遠拖不回了, 就像那已分手并結(jié)婚了的前女友永遠也回不來一樣

(好了, 找一沒人的地哭暈在廁所好了  是不是同時又想起來那幾句話[得不到的永遠在騷動, 失去的永遠在懷念, 身邊的永遠成為風(fēng)景, ......]), 以上是逗逼時刻就當(dāng)沒發(fā)生一樣好了 
其實這也是上面留的一個坑, 現(xiàn)在來優(yōu)化填坑, 就是實現(xiàn)和 網(wǎng)易云音樂 網(wǎng)站 登錄窗口 一樣的效果, 禁止 登錄窗口 拖拽出文檔可視區(qū)以外! 下面是填坑時刻, 非戰(zhàn)斗人員請火速離開現(xiàn)場  

其實思路很簡單就是當(dāng) 登錄窗口 的四個邊和文檔窗口的其一邊界重合時, 就讓 登錄窗口 的那一個邊的外邊距值與重合的文檔那一個邊的值相等, 那這個事情就妥妥的搞定了!

只需要修改 documnet.onmousemove 事件方法 登錄窗口 當(dāng)前位置即可!

// 當(dāng)鼠標(biāo)移動時改變彈出框的位置
oDialog.style.left = oEvent.clientX - iDisX + "px";
oDialog.style.top = oEvent.clientY - iDisY + "px";

改寫如下:

// 優(yōu)化填坑 - 禁止 `登錄窗口` 拖拽出文檔可視區(qū)域, 保存 `登錄窗口` 在文檔中具體位置
var iCurrentDialogDisLift = oEvent.clientX - iDisX; // `登錄窗口` 當(dāng)前位置于X軸具體值
var iCurrentDialogDisTop = oEvent.clientY - iDisY;  // `登錄窗口` 當(dāng)前位置于Y軸具體值

// 檢測當(dāng)前 `登錄窗口` X軸是否位于文檔可視區(qū)域最左側(cè)或最右側(cè)
if ( iCurrentDialogDisLift < 0 ) {
    iCurrentDialogDisLift = 0;
} else if ( iCurrentDialogDisLift > document.documentElement.clientWidth - oDialog.offsetWidth  ) {
    // 當(dāng)前文檔X軸可視區(qū)域大小包括左右邊框線寬度 - `登錄窗口` X軸區(qū)域大小包括左右邊框線寬度
    iCurrentDialogDisLift = document.documentElement.clientWidth - oDialog.offsetWidth;
}

// 檢測當(dāng)前 `登錄窗口` Y軸是否位于文檔可視區(qū)域最上端或最下端
if ( iCurrentDialogDisTop < 0 ) {
    iCurrentDialogDisTop = 0;
} else if ( iCurrentDialogDisTop > document.documentElement.clientHeight - oDialog.offsetHeight ) {
    // 當(dāng)前文檔Y軸可視區(qū)域大小包括上下邊框線寬度 - `登錄窗口` Y軸區(qū)域大小包括上下邊框線寬度
    iCurrentDialogDisTop = document.documentElement.clientHeight - oDialog.offsetHeight;
}

// 當(dāng)鼠標(biāo)移動時改變彈出框的位置
oDialog.style.left = iCurrentDialogDisLift + "px";
oDialog.style.top = iCurrentDialogDisTop + "px";

    
    
    
    


    
    

        

            登錄
            X
        
    

文章寫到這里可能也有不伙伴說了, 滾動一小段距離也就是出現(xiàn)滾動條時, 再拖拽還是會出現(xiàn) 登錄窗口 脫離可視區(qū)域的情況!
對于小伙伴提出的問題至少有二種解決方案！

添加滾動距離計算, 當(dāng)頁面滾動后實時讓 登錄窗口 位于正中間并且只允許在可視區(qū)域拖拽

添加模態(tài)框, 就是當(dāng)出現(xiàn) 登錄窗口 時禁止?jié)L動

下面來一個一個的說:

    
    
    
    


    
    

        

            登錄
            X
        
    

至于添加模態(tài)框, 就是當(dāng)出現(xiàn) 登錄窗口 時禁止?jié)L動這種方法你可以試著實現(xiàn)一下！

Github: JavaScript實現(xiàn)【網(wǎng)易云音樂Web站登錄窗口】拖拽功能

以上就是實現(xiàn)與 網(wǎng)易云音樂 Web站 登錄窗口  拖拽效果一致的具體過程
希望本文對你的工作和學(xué)習(xí)有所幫助
如果覺得還不錯怎么感謝我呢？ 媽呀! 點贊啊!
Good Luck! from warnerwu at 2017.08.19 AM