JS——事件詳情(拖拽案例:onmousedown、onmousemove、onmouseup方法)

實現拖拽案例瀏覽器

效果以下圖所示:spa

 

代碼以下圖所示:3d

代碼思路說明:blog

第23行代碼:在div元素中觸發onmousedown事件,實現鼠標在div按下,不提起功能  【區別於onclick,onclick:按下、提起事件,屬於兩個動做(即:onmousedown+onmouseup)】事件

第20-21行代碼:聲明變量,用於計算鼠標按下位置到div位置長度距離  (詳細見下圖解釋分析)內存

第24-25行代碼:設置鼠標按下位置到div位置長度距離(即:鼠標位置-div左邊距到瀏覽器的長度距離)  (詳細見下圖解釋分析)變量

第27行代碼:鼠標移動事件   當div按下觸發此事件,讓div整屏可移動,這就是「document.onmousemove」的做用cli

第28-29行代碼:讓div移動,即改變div的左邊距/上邊距到瀏覽器的距離長度(記得加‘px’單位)  而div左邊距到瀏覽器的距離長度=鼠標位置-鼠標按下位置到div位置長度距離   (詳細見下圖解釋分析)sed

第32行代碼:鼠標提起事件bug

第33-34行代碼:關閉移動事件並關閉不須要的提起事件以節省內存空間

第37行代碼:return false 用於解決ff舊版本(空值div拖拽bug)的兼容問題,而設置的阻止默認事件

 

詳細解釋距離的問題,以下圖:(講解20-2一、24-2五、28-29行的代碼)

 

以上簡單拖拽案例,足以知足需求了,可是,以上所編寫的代碼還有一點bug,那就是:當用戶把div拖拽至瀏覽器外並鬆手,div就會消失不見,怎麼找都找不回。

因此,修改以上bug,實現:div只能在瀏覽器範圍內實現拖拽現象(防止拖出頁面)

修改後的代碼以下圖:

效果以下圖所示:

相關文章
相關標籤/搜索