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