JS進階篇4---原生JS實現(xiàn)對元素的拖拽

phoenixsky 發(fā)布于2019-08-23 18:22 / 3687人閱讀

摘要：原生實現(xiàn)對元素的拖拽一背景介紹此處為鋪墊內(nèi)容，可跳過隨著前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識新技術層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗。

原生 JS 實現(xiàn)對 html 元素的拖拽 一、背景介紹

【此處為鋪墊內(nèi)容，可跳過】隨著 Web 前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識、新技術層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗。而隨著移動端的不斷發(fā)展，在移動端，人機交互方式發(fā)生了很大轉變，新的人機交互方式對提供給用戶的 “動作” 有了更高要求，例如拖拽功能，就是在移動端會經(jīng)常接觸到的功能。此文就詳細地講解一下，一個簡單的拖拽功能的實現(xiàn)（拖拽元素可改變，瀏覽器窗口邊界檢測）。

二、知識準備

為了讓各位對此文內(nèi)容有更深刻的掌握，需要掌握如下知識。

1、clientX，clientY 屬性

clientX（ clientY ） 事件屬性返回當事件被觸發(fā)時鼠標指針相對于瀏覽器當前可視窗口的水平（垂直）坐標。
注意：不包括工具欄和滾動條

2、offsetTop，offsetLeft 屬性

offsetTop ( offsetLeft )，指的是子元素距離其父元素的上邊框（左邊框）的偏移量，在不同的瀏覽器中其值不同，且與父元素的 position 屬性（ position: static; 除外）有關。在不同瀏覽以及不同 position 下的具體值，讀者可以自行查閱相關資料，因其內(nèi)容較多，就不展開論述了。

3、clientWidth，clientHeight屬性

Element.clientWidth（ Element.clientHeight ）屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。該屬性值會被四舍五入為一個整數(shù)。如果你需要一個小數(shù)值，可使用 element.getBoundingClientRect() 。

4、setCapture，releaseCapture 方法

MDN 對 SetCapture() 函數(shù)的說明為：“該函數(shù)在屬于當前線程的指定窗口里設置鼠標捕獲。一旦窗口捕獲了 鼠標，所有鼠標輸入都針對該窗口，無論光標是否在窗口的邊界內(nèi)。同一時刻只能有一個窗口捕獲鼠標。如果鼠標光標在另一個線程創(chuàng)建的窗口上，只有當鼠標鍵按下時系統(tǒng)才將鼠標輸入指向指定的窗口。”
通俗來講，舉個栗子：一只羊被一根有彈性的繩子（ SetCapture ）拴在木樁，羊可以在繩子可以延展的范圍內(nèi) 隨意活動，但永遠無法擺脫繩子的束縛。除非有其他因素導致繩子斷了（使用了 ReleaseCapture 或點擊了其他窗口)。
ReleaseCapture() 用來釋放鼠標捕獲，當不再需要繼續(xù)獲得鼠標消息就要應該調(diào)用 ReleaseCapture() 釋放掉，否則別的線程想捕獲鼠標事件就會失敗。注意：SetCapture() 和 ReleaseCapture() 必須成對出現(xiàn)。

三、實現(xiàn)思路

如果想對元素進行拖拽，那么必須使用三個事件，并且這三個事件的使用順序不能打亂。

1、onmousedown：鼠標按下事件
2、onmousemove：鼠標移動事件
3、onmouseup：鼠標抬起事件

拖拽的基本原理就是根據(jù)鼠標的移動來移動被拖拽的元素。鼠標的移動也就是 x、y 坐標的變化；元素的移動就是元素 position 屬性的 top 和 left 值的改變。當然，并不是任何時候移動鼠標都要造成元素的移動，而應該判斷鼠標左鍵的狀態(tài)是否為按下狀態(tài)，是否是在可拖拽的元素上按下的。具體過程如下：

拖拽狀態(tài)?=?false

鼠標在元素上按下之后 {
    拖拽狀態(tài)?=?true
    設置鼠標捕獲 
    記錄下鼠標的 x，y 坐標
    記錄下元素的 x，y 坐標
}

鼠標在元素上移動時 {
    若拖拽狀態(tài)為 false 就什么也不做
    如果拖拽狀態(tài)是 true，那么
        元素的 y?坐標 =?現(xiàn)在鼠標 y?-?原來鼠標 y?+?原來元素 y
        元素的 x?坐標 =?現(xiàn)在鼠標 x?-?原來鼠標 x?+?原來元素 x
}

鼠標抬起時 {
    拖拽狀態(tài)?=?false
}

四、完整源碼




    
    原生JS實現(xiàn)元素拖拽

注意事項
1、onmousedown 事件中的操作對象為拖拽元素，而 onmousemove 和 onmouseup 事件中的操作對象為 document，這是因為，點擊某物體時，用需要拖拽的對象即可，onmousemove 和 onmouseup 是全局區(qū)域，也就是整個文檔通用，應該使用 document 對象而不是被拖拽的對象（否則，采用拖拽對象時物體只能往右方或下方移動）

2、之所以使用 setCapture() 和 releaseCapture()，其目的是為了修復低版本 IE 的 bug。在低版本 IE 下，當我們在要拖動的元素上，按下鼠標按鈕拖動時，當拖動過快，或者是超出瀏覽器的文檔窗口時，拖動對象身上的 onmousedown 事件就會失效。在 Chrome 我們可以為 doucment 綁定 onmouseout 事件來判斷是否發(fā)生這樣的情況，但是 IE 下卻行不通，所以最好的解決辦法就時為要拖動的元素對象鎖定鼠標事件，在拖動后再解除事件鎖定。在本例中，這兩個方法用于 onmousedown 和 onmouseup 中。

3、另外，在 Firefox 中有相似的功能，它們分別是：

captureEvents ( Event.eventType )

releaseEvents ( Event.eventType )

五、案例總結

雖然元素的拖拽算是一個比較基礎的知識點，但在實現(xiàn)的過程中，有許多細節(jié)需要注意，例如計算坐標的時候，對那幾個屬性的了解程度，再例如，事件的觸發(fā)順序，還有，IE 中的事件獲取， setCapture() 和 releaseCapture() 等。

雖然 H5 直接提供了拖拽 API，但為了兼容性，小伙伴們還是需要用 js 去處理的。上例中，雖然對拖拽做了一定的兼容性處理和封裝，拖拽對象可以是 div，圖片，文字等，但總的來說，是一個比較基礎的實現(xiàn)，但有了這個原型，小伙伴們可以根據(jù)自己的需求，再加以封裝和拓展，例如限定拖拽方向、范圍、速度等等。有任何疑問或建議，可以在評論區(qū)留言哦，轉載請注明出處。

云服務器 GPU云服務器 js實現(xiàn)數(shù)據(jù)的拖拽原生js實現(xiàn)拖拽元素拖拽 js 原理原生js查找元素

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105116.html

JS進階篇4---原生JS實現(xiàn)對元素的拖拽

摘要：原生實現(xiàn)對元素的拖拽一背景介紹此處為鋪墊內(nèi)容，可跳過隨著前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識新技術層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗。原生 JS 實現(xiàn)對 html 元素的拖拽一、背景介紹【此處為鋪墊內(nèi)容，可跳過】隨著 Web 前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識、新技術層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗。而隨著...

evin2016 2019-08-02 15:24 評論0 收藏0
前端基礎進階（十）：面向對象實戰(zhàn)之封裝拖拽對象

摘要：前面幾篇文章，我跟大家分享了的一些基礎知識，這篇文章，將會進入第一個實戰(zhàn)環(huán)節(jié)利用前面幾章的所涉及到的知識，封裝一個拖拽對象。不封裝對象直接實現(xiàn)利用原生封裝拖拽對象通過擴展來實現(xiàn)拖拽對象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面幾篇文章，我跟大家分享了JavaScript的一些基礎知識，這篇文章，...

Eidesen 2019-08-21 18:31 評論0 收藏0
從GGEditor的一個案例看JS原生拖拽功能

摘要：涉及部分的，不會對理解全局產(chǎn)生干擾。在上監(jiān)聽事件，當為畫布時，通過創(chuàng)建一個藍色虛線框移動的時候，更新的位置在上監(jiān)聽事件，落在畫布時，創(chuàng)建一個的節(jié)點從而完成整個拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

PingCAP 2019-08-02 15:22 評論0 收藏0
從GGEditor的一個案例看JS原生拖拽功能

摘要：涉及部分的，不會對理解全局產(chǎn)生干擾。在上監(jiān)聽事件，當為畫布時，通過創(chuàng)建一個藍色虛線框移動的時候，更新的位置在上監(jiān)聽事件，落在畫布時，創(chuàng)建一個的節(jié)點從而完成整個拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

taowen 2019-08-23 18:16 評論0 收藏0