拖动一个div的时候，鼠标移动过快会出现的异常

拖动的效果实现了，但是经测试发现如果光标移动过快发现： 光标脱离div 导致div上的onmousemove事件不能被触发，div也就不再跟着光标移动了。我尝试把div上的onmousemove事件写到body上，结果发现移动过快的时候div直接‘飞’到屏幕外面去了代码贴一下：  （相关的函数写到最后面了）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>餐饮管理系统</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
     div span {
       background-color: rgb(0, 128, 192);cursor: pointer;
     }
     .class1 {cursor: pointer;}
     #table1 {cursor: default;}
    </style>
  </head>
  <body onload="init();" onmouseup="moveFlag[0]=0;" onmousemove="Fmouse(event);">   <div id="riqi1" style="position: absolute; top: 98px; left: 250px; background-color: rgb(128, 128, 255);rgb(128, 128, 255);">
   <div align="left" style="background-color: rgb(128, 128, 255);cursor: move;" onmousedown="moveFlag[0]=1;moveFlag[1]=event.offsetX;moveFlag[2]=event.offsetY;">
   <span onclick="Friqi1('lastYear');">左一年</span> <span onclick="Friqi1('lastMonth');">上一月</span> </div>
   <div align="right" style="background-color: rgb(128, 128, 255);"><span id="riqi2"></span>&nbsp;&nbsp;&nbsp;<span onclick="init();">当天</span> 
   &nbsp;&nbsp;&nbsp;<span onclick="Friqi1('nextMonth');">下一月</span> <span onclick="Friqi1('nextYear');">右一年</span></div>
   <table id="table1" border="1px;" width="350px;">
   <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><tr>
   </table>
   </div>
  </body>
  <script type="text/javascript">
var lastDate; var lastId;
   function init(){
   lastDate=new Date(); lastId=FdateStr(lastDate);
   Fdate(lastDate); Fcell(document.getElementById(lastId));document.getElementById(lastId).style.borderColor="red";
   }
   function Friqi1(data){
   lastDate.setDate(1);
if(data=="lastYear"){lastDate.setFullYear(lastDate.getFullYear()-1);}
if(data=="lastMonth"){lastDate.setMonth(lastDate.getMonth()-1);}
if(data=="nextMonth"){lastDate.setMonth(lastDate.getMonth()+1);}
if(data=="nextYear"){lastDate.setFullYear(lastDate.getFullYear()+1);}
   Fdate(lastDate); 
   var tempDate = new Date();
   if(tempDate.getFullYear()==lastDate.getFullYear()&&tempDate.getMonth()==lastDate.getMonth()){init();} 
   else {lastDate.setDate(1); Fcell(lastDate);}
}
   function FdateStr(data){return data.getFullYear()+"-"+(data.getMonth()+1)+"-"+data.getDate();}
   function Fdate(data){
   data.setDate(1); var num=data.getDay(); 
   var bef=data.getFullYear()+"-"+(data.getMonth()+1)+"-";
   var tempDate;  data.setMonth(data.getMonth()+1); data.setDate(0);
   var end_date=FdateStr(data);
   var i = 1; var row; var cell; var innerCell;
   table1.rows[1]&&table1.deleteRow(1);table1.rows[1]&&table1.deleteRow(1);table1.rows[1]&&table1.deleteRow(1);
   table1.rows[1]&&table1.deleteRow(1);table1.rows[1]&&table1.deleteRow(1);table1.rows[1]&&table1.deleteRow(1);
   for(tempDate=bef+i;;i++,tempDate=bef+i){
   if(i==1){
   row=table1.insertRow(1); var j;
   for(j=1;j<=num;j++){row.insertCell(0);}
   }
   if((i+num-1)%7==0&&(i+num-1)/7!=0){row=table1.insertRow((i+num)/7+1);}//新行
   cell=row.insertCell((i+num-1)%7);
   cell.innerHTML=i;cell.id=tempDate;cell.onclick=function(){Fcell(this)};cell.className="class1";
   if(tempDate==end_date) break;
   }
   lastDate=data;
   }
   function Fcell(data){
   riqi2.innerHTML=data.id||FdateStr(data);
   document.getElementById(lastId)&&(document.getElementById(lastId).style.background="");
   lastId=data.id||FdateStr(data);
   data.id||(data=document.getElementById(FdateStr(data)));
   data.style.background="blue";
   }
  
   //拖动涉及的函数和变量
   var moveFlag=[0,0,0];
   function Fmouse(e){
   if(moveFlag[0]==1){
   var y=parseInt(riqi1.style.top.replace("px",""))+e.offsetY-moveFlag[2];
   riqi1.style.top=y;
   var x=parseInt(riqi1.style.left.replace("px",""))+e.offsetX-moveFlag[1];
   riqi1.style.left=x;
   }
   }
  </script>
</html>

解决方案 »

  1.   


          //拖动涉及的函数和变量
          var moveFlag=[0,0,0];
          function Fmouse(e){
              if(moveFlag[0]==1){
                  var y=e.clientY-moveFlag[2];
                  riqi1.style.top=y;
                  var x=e.clientX-moveFlag[1];
                  riqi1.style.left=x;
              }
          }
      

  2.   

    虽然还没明白offsetY和clientY之间有什么区别，不过这样写确实OK了。
      

  3.   

    offsetY是相对于当前事件元素左上角
    clientY是相对于页面左上角