JSy元素拖拽，鼠标滑动过快产生的问题

maozhihui52102 2013-07-05 09:52:19

<!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>
这是一个简单的拖拽。但是正常情况下拖拽没问题，当鼠标按下后快速移动时就产生问题了，元素跟不上鼠标的动作。最后导致鼠标动了，元素保持不动了，这时候鼠标弹起，再把鼠标放进元素内不需要按下，就可以移动元素了。

...全文