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

示例

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

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

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

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

 1 <div id="box" ></div>
 2 <script>
 3     // 初始化拖放物件
 4     var box = document.getElementById("box");
 5     // 獲取頁面中被拖放元素的引用指標
 6     box.style.position = "absolute";  // 絕對定位
 7     box.style.width = "160px";  // 定義寬度
 8     box.style.height = "120px";  // 定義高度
 9     box.style.backgroundColor = "red";  //
 
 定義背景色
10     // 初始化變數，標準化事件物件
11     var mx, my, ox, oy;  // 定義備用變數
12     function e(event){  // 定義事件物件標準化函式
13         if( ! event){  // 相容IE瀏覽器
14             event = window.event;
15             event.target = event.srcElement;
16             event.layerX = event.offsetX;
17             event.layerY = event.offsetY;
18         }
19         event.mx = event.pageX || event.clientX + document.body.scrollLeft;
20         // 計算滑鼠指標的x軸距離
21         event.my = event.pageY || event.clientY + document.body.scrollTop;
22         // 計算滑鼠指標的y軸距離
23         return event;  // 返回標準化的事件物件
24     }
25      // 定義滑鼠事件處理函式
26     document.onmousedown = function(event){  // 按下滑鼠時，初始化處理
27         event = e(event);  // 獲取標準事件物件
28         o = event.target;  // 獲取當前拖放的元素
29         ox = parseInt(o.offsetLeft);  // 拖放元素的x軸座標
30         oy = parseInt(o.offsetTop);  // 拖放元素的y軸座標
31         mx = event.mx;  // 按下滑鼠指標的x軸座標
32         my = event.my;  // 按下滑鼠指標的y軸座標
33         document.onmousemove = move;  // 註冊滑鼠移動事件處理函式
34         document.onmouseup = stop;  // 註冊鬆開滑鼠事件處理函式
35     }
36     function move(event){  // 滑鼠移動處理函式
37         event = e(event);
38         o.style.left = ox + event.mx - mx  + "px";  // 定義拖動元素的x軸距離
39         o.style.top = oy + event.my - my + "px";  // 定義拖動元素的y軸距離
40     }
41     function stop(event){  // 鬆開滑鼠處理函式
42        event = e(event);
43        ox = parseInt(o.offsetLeft);  // 記錄拖放元素的x軸座標
44        oy = parseInt(o.offsetTop);  // 記錄拖放元素的y軸座標
45        mx = event.mx ;  // 記錄滑鼠指標的x軸座標
46        my = event.my ;  // 記錄滑鼠指標的y軸座標
47        o = document.onmousemove = document.onmouseup = null;
48        // 釋放所有操作物件
49     }
50 </script>

本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15547962.html