實現拖拽案例瀏覽器
效果以下圖所示: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只能在瀏覽器範圍內實現拖拽現象(防止拖出頁面)
修改後的代碼以下圖:
效果以下圖所示: