實現拖拽案例
效果如下圖所示：
代碼如下圖所示：
代碼思路說明：
第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-21、24-25、28-29行的代碼）
以上簡單拖拽案例，足以滿足需求了，但是，以上所編寫的代碼還有一點bug，那就是：當用戶把div拖拽至瀏覽器外並松手，div就會消失不見，怎么找都找不回。
所以，修改以上bug，實現：div只能在瀏覽器范圍內實現拖拽現象（防止拖出頁面）
修改后的代碼如下圖：
效果如下圖所示：
