原生JS快速拖動元素失效問題

Hydrogen 發(fā)布于2019-08-22 18:07 / 2908人閱讀

摘要：快速拖動元素失效問題原因及解決方法情景再現(xiàn)晚上在寫畢設(shè)時，碰到個快速拖動元素，元素會跟不上的問題。延遲之后，元素移動的速度趕不上鼠標(biāo)移動的速度，可能造成鼠標(biāo)移出元素的狀態(tài)，從而觸發(fā)了事件，從而造成了被拖動元素停止移動。

快速拖動元素失效問題原因及解決方法 情景再現(xiàn)

晚上在寫畢設(shè)時，碰到個快速拖動元素，元素會跟不上的問題。具體情形如下：

代碼及演示結(jié)果

出現(xiàn)的問題

綁定在 document 或 body 上

綁定在 div 自己身上

解決方案

首先，自己的思路是 div 之前已經(jīng)綁定 mousedown 事件，再綁定 mousemove 事件，綁定事件過多從而出現(xiàn)快速移動失效問題。但這思路自己都感覺是錯的，于是網(wǎng)上搜索相關(guān)問題，從一篇文章中找到了其中的原因，原因如下：

鼠標(biāo)滑動地太快，自然會造成 mousemove 事件多次發(fā)生，相應(yīng)的，事件處理函數(shù)也多次被調(diào)用，自然造成延遲。延遲之后，元素移動的速度趕不上鼠標(biāo)移動的速度，可能造成鼠標(biāo)移出元素的狀態(tài)，從而觸發(fā)了 mouseout 事件，從而造成了被拖動元素停止移動。 ——原文來自 鳶飛魚躍

綁定到body 與 document 之間的細(xì)微差別

上面講到，綁定 mousemove 事件到 body 或 document 上，都能拖動地很流暢，但是它們之間還是有些細(xì)微差別的，如下圖所示：

綁定到 document 上

綁定到 body 上

在 Chrome 測試結(jié)果中可以看到，綁定到 document 上時，鼠標(biāo)移動到菜單欄上，元素依舊能被拖動，而綁定在 body 上卻做不到這一點(diǎn)。

代碼

最后，以下是本次測試中用到的代碼，感興趣的小伙伴可以貼下來自己跑一跑




    
    



    Drag Me

云服務(wù)器 GPU云服務(wù)器原生JS拖動原生js查找元素原生js獲取元素原生js添加元素

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95521.html

相關(guān)文章

原生JS快速實(shí)現(xiàn)拖放（drag and drop）效果

摘要：接下來我們就用原生和快速實(shí)現(xiàn)這樣的拖放效果的內(nèi)容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點(diǎn)容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設(shè)置屬性為，表示該元素可以被拖拽。拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實(shí)現(xiàn)，其實(shí)用原生js實(shí)現(xiàn)起來也非常的方便。接下來我們就用原生js和css快速實(shí)現(xiàn)這樣的拖放效果： showImg(https://s...

objc94 2019-08-02 15:22 評論0 收藏0
原生JS快速實(shí)現(xiàn)拖放（drag and drop）效果

摘要：接下來我們就用原生和快速實(shí)現(xiàn)這樣的拖放效果的內(nèi)容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點(diǎn)容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設(shè)置屬性為，表示該元素可以被拖拽。拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實(shí)現(xiàn)，其實(shí)用原生js實(shí)現(xiàn)起來也非常的方便。接下來我們就用原生js和css快速實(shí)現(xiàn)這樣的拖放效果： showImg(https://s...

arashicage 2019-08-30 11:14 評論0 收藏0
原生JS快速實(shí)現(xiàn)拖放（drag and drop）效果

摘要：接下來我們就用原生和快速實(shí)現(xiàn)這樣的拖放效果的內(nèi)容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點(diǎn)容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設(shè)置屬性為，表示該元素可以被拖拽。拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實(shí)現(xiàn)，其實(shí)用原生js實(shí)現(xiàn)起來也非常的方便。接下來我們就用原生js和css快速實(shí)現(xiàn)這樣的拖放效果： showImg(https://s...

jzzlee 2019-08-23 18:15 評論0 收藏0
JS進(jìn)階篇4---原生JS實(shí)現(xiàn)對元素的拖拽

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

evin2016 2019-08-02 15:24 評論0 收藏0
JS進(jìn)階篇4---原生JS實(shí)現(xiàn)對元素的拖拽

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

phoenixsky 2019-08-23 18:22 評論0 收藏0