<!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
<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
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货