<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>
#move1{position:absolute; border:5px solid #000000; top:200px; left:200px; width:100px; height:100px;}
</style>
</head>
<script>
var down=false;
var mx,my,dx,dy;
function getTop(obj)
{
   var offset=obj.offsetTop;
   if(obj.offsetParent!=null) offset+=getTop(offsetParent);
   return offset;
}
function getLeft(obj)
{
   var offset=obj.offsetLeft;
   if(obj.offsetParent!=null) offset+=getLeft(offsetParent);
   return offset;
}
function mouseCoords(ev) 

if(ev.pageX || ev.pageY){ 
return {x:ev.pageX, y:ev.pageY}; 

return { 
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
y:ev.clientY + document.body.scrollTop - document.body.clientTop 
}; 

$(document).ready(function(){
  
      $("#move1").mousedown(function(){
  
  down=true;
  mx=event.clientX;
  my=event.clientY;
  dx=parseFloat($(this).css('left'));
  dy=parseFloat($(this).css('top'));
 
   
  
  
     });
  $(document).mousemove(function(){
                
if(down)
{
   
   var cx=dx+event.clientX-mx;
   var cy=dy+event.clientY-my;
   $(this).css({"left":cx,"top":cy});
}
                    });

$(document).mouseup(function(){

              
  down=false;



       });
  
  
  
  });
  
  
  
  
  
                          </script>
<body>
<div id="move1">请拖动他</div>
</body>
</html>
这是一个简单的拖拽。但是正常情况下拖拽没问题,当鼠标按下后快速移动时就产生问题了,元素跟不上鼠标的动作。最后导致鼠标动了,元素保持不动了,这时候鼠标弹起,再把鼠标放进元素内不需要按下,就可以移动元素了。HTMLjavsscript