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

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

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

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

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

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

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

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

釋放 onmousemove 事件

釋放 onmouseup 事件自身

以上過程就是一個(gè)完整的 登錄窗口 拖拽的過程, 不過要注意以下幾點(diǎn):

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

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

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

下圖是將 onmousemove 綁定到 document 上的事件, 這樣才是最完美的, 因?yàn)槟悴还茉趺赐纤疾粫?huì)丟失事件綁定

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

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

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

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

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

    
    
    
    


    
    

        

            登錄
            X
        
    

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

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

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

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

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

// 當(dāng)鼠標(biāo)移動(dòng)時(shí)改變彈出框的位置
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)移動(dòng)時(shí)改變彈出框的位置
oDialog.style.left = iCurrentDialogDisLift + "px";
oDialog.style.top = iCurrentDialogDisTop + "px";

    
    
    
    


    
    

        

            登錄
            X
        
    

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

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

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

下面來一個(gè)一個(gè)的說:

    
    
    
    


    
    

        

            登錄
            X
        
    

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

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

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