JS——事件詳情（拖拽案例：onmousedown、onmousemove、onmouseup方法）

實現拖拽案例

效果以下圖所示：

 

代碼以下圖所示：

代碼思路說明：

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

第20-21行代碼：聲明變量，用於計算鼠標按下位置到div位置長度距離　　（詳細見下圖解釋分析）

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

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

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

第32行代碼：鼠標提起事件

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

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

 

詳細解釋距離的問題，以下圖：（講解20-2一、24-2五、28-29行的代碼）

 

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

因此，修改以上bug，實現：div只能在瀏覽器範圍內實現拖拽現象（防止拖出頁面）

修改後的代碼以下圖：

效果以下圖所示：