mousemove是一個實時響應的事件類型，當鼠標指針的位置發生變化時（至少移動1個像素）就會觸發mousemove事件。該事件響應的靈敏度主要參考鼠標指針移動速度，以及瀏覽器跟蹤更新的速度。要對鼠標拖放操作進行設計，需要理清和解決以下幾個問題。
❑定義拖放元素為絕對定位，以及設計事件的響應過程，這個比較容易實現。
❑清楚幾個坐標概念：按下鼠標按鍵時的指針坐標，移動中當前鼠標的指針坐標，鬆開鼠標按鍵時的指針坐標，拖放元素的原始坐標，拖動中的元素坐標。
❑算法設計：按下鼠標按鍵時，獲取被拖放元素和鼠標指針的位置，在移動中實時計算鼠標偏移的距離，利用該偏移距離加上被拖放元素的原坐標位置來獲得拖放元素的實時坐標。
如圖6.6所示，其中變量ox和oy分別記錄按下鼠標時被拖放元素的橫坐標值和縱坐標值，它們可以通過事件對象的offsetLeft和offsetTop屬性獲取。變量mx和my表示按下鼠標按鍵時鼠標指針的坐標位置。而event.mx和event.my是事件對象的自定義屬性，用它們來存儲當鼠標移動時鼠標指針的實時位置。
圖 6.6 拖放操作設計示意圖
在獲取了上面提到的3對坐標值之後，就可以動態計算處在拖動狀態中的元素的實時坐標位置，即x軸方向的值為ox+event.mx-mx，y軸方向的值為oy+event.my-my。當釋放鼠標按鍵時，可以釋放事件類型，並記下鬆開鼠標指針時被拖動元素的坐標值及鼠標指針的位置，留待下一次拖放操作時調用。
鼠標拖放操作的設計方案如下：
＜p＞＜/p＞
＜script language="javascript"type="text/javascript"＞
//初始化拖放對像
var box=document.getElementById("box");//獲取頁面中被拖放元素的引用指針
box.style.position="absolute";
box.style.;
box.style.;
box.style.backgroundColor="red";
//初始化變量，標準化事件對像
var mx,my,ox,oy;
function e(event){//定義事件對像標準化函數
if(!event){
event=window.event;
event.target=event.srcElement;
event.layerX=event.offsetX;
event.layerY=event.offsetY;
}
event.mx=event.pageX||event.clientX+document.body.scrollLeft;//計算鼠標指針的x軸距離
event.my=event.pageY||event.clientY+document.body.scrollTop;//計算鼠標指針的y軸距離
return event;
}
//定義鼠標事件處理函數
document.onmousedown=function(event){//按下鼠標按鍵時初始化處理
event=e(event);
o=event.target;
ox=parseInt(o.offsetLeft);
oy=parseInt(o.offsetTop);
mx=event.mx;
my=event.my;
document.onmousemove=move;
document.onmouseup=stop;
}
function move(event){//鼠標移動處理函數
event=e(event);
o.style.left=ox+event.mx-mx+"px";
o.style.top=oy+event.my-my+"px";
}
function stop(event){//鬆開鼠標按鍵時的處理函數
event=e(event);
ox=parseInt(o.offsetLeft);
oy=parseInt(o.offsetTop);
mx=event.mx;
my=event.my;
o=document.onmousemove=document.onmouseup=null;
}
＜/script＞