原生JS快速拖動(dòng)元素失效問(wèn)題

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

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

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

晚上在寫畢設(shè)時(shí)，碰到個(gè)快速拖動(dòng)元素，元素會(huì)跟不上的問(wèn)題。具體情形如下：

代碼及演示結(jié)果

出現(xiàn)的問(wèn)題

綁定在 document 或 body 上

綁定在 div 自己身上

解決方案

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

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

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

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

綁定到 document 上

綁定到 body 上

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

代碼

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




    
    



    Drag Me

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95521.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

phoenixsky 2019-08-23 18:22 評(píng)論0 收藏0