JS mousemove事件：滑鼠移動事件

在JavaScript 中，mousemove 事件是一個實時響應的事件，當滑鼠指標的位置發生變化時（至少移動一個畫素），就會觸發 mousemove 事件。該事件響應的靈敏度主要參考滑鼠指標移動速度的快慢以及瀏覽器跟蹤更新的速度。

範例

下面範例演示了如何綜合應用各種滑鼠事件實現頁面元素拖放操作的設計過程。實現拖放操作設計需要解決以下幾個問題。

定義拖放元素為絕對定位以及設計事件的響應過程，這個比較容易實現。
清楚幾個坐標概念：按下滑鼠時的指標坐標，移動中當前滑鼠指標坐標，鬆開滑鼠時的指標坐標，拖放元素的原始坐標，拖動中的元素坐標。
演算法設計：按下滑鼠時，獲取被拖放元素和滑鼠指標的位置，在移動中實時計算滑鼠偏移的距離，並利用該偏移距離加上被拖放元素的原坐標位置，獲得拖放元素的實時坐標。

如下圖所示，其中變數 ox 和 oy 分別記錄按下滑鼠時被拖放元素的縱橫坐標值，它們可以通過事件物件的 offsetLeft 和 offsetTop 屬性獲取。變數 mx 和 my 分別表示按下滑鼠時，滑鼠指標的坐標位置。而 event.mx 和 event.my 是事件物件的自定義屬性，用它們來儲存當滑鼠移動時滑鼠指標的實時位置。

當獲取了上面 3 對坐標值之後，就可以動態計算拖動中元素的實時坐標位置，即 x 軸值為 ox+event.mx-mx，y 軸為 oy+event.my-my。當釋放滑鼠按鈕時，就可以釋放事件，並記下鬆開滑鼠指標時拖動元素的坐標值，以及滑鼠指標的位置，留待下一次拖放操作時呼叫。