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＞