怎么實現鼠標拖動事件
學習前端的同學你們知道怎么實現鼠標拖動事件嗎?不知道的話跟著學習啦小編一起來學習了解鼠標拖動事件。
鼠標拖動事件介紹
Javascript的mousemove事件類型是一個實時響應的事件，當鼠標指針的位置發生變化時(至少移動1個像素)，就會觸發mousemove事件。該事件響應的靈敏度主要參考鼠標指針移動速度的快慢，以及瀏覽器跟蹤更新的速度。
例如，接下來的一個例子就演示了如何綜合應用各種鼠標事件來實現頁面元素拖放操作的設計過程。在實現拖放操作的設計過程中，需要理清和解決以下幾個問題：
定義拖放元素為絕對定位，以及設計事件的響應過程。這個實現比較容易。
清楚幾個坐標概念：按下鼠標時的指針坐標，移動過程中當前鼠標的指針坐標，松開鼠標時的指針坐標，目標被拖動元素的元素坐標，拖動過程中的目標元素坐標。
算法設計：按下鼠標時，獲取目標被拖動元素和鼠標指針的坐標位置，在移動過程中實時計算鼠標偏移的距離，并利用該偏移距離加上目標被拖動元素的原始坐標位置，獲得目標被拖動元素的實時坐標位置。
如上圖所示，其中變量ox和oy分別記錄按下鼠標時目標被拖動元素的縱橫坐標值，它們可以通過事件對象的offsetLeft和offsetTom屬性獲取。變量mx和my分別表示按下鼠標時，鼠標指針的坐標位置。而event.mx和event.my則是事件對象的自定義屬性，用它們來存儲當鼠標發生移動時鼠標指針的實時坐標位置。
當獲取了上面3對坐標值之后，就可以動態計算目標被拖動元素的實時坐標位置，即x軸值為ox+event.mx-mx，y軸為oy+event.my-my。當松開鼠標時，則可以釋放事件類型，并記錄松開鼠標時鼠標指針拖動目標元素的坐標值，以及鼠標指針的位置，留待下一次做拖動操作時調用。
鼠標拖動事件相關文章：
2.如何設置鼠標事件