jquery实现div拖动，div跟不上鼠标速度解决方法
日期：2014-05-16 浏览次数：20423 次
jquery实现div拖动，div跟不上鼠标速度
我这里有两段代码：
第一个：
这个可以实现div拖动，但div跟不上鼠标速度
第二个：
这个实现div拖动，并且可以跟上鼠标速度。
我这里有两段代码：
第一个：
这个可以实现div拖动，但div跟不上鼠标速度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.divDrag1{position:absolute;width:100px;height:100px;border:1px solid red;background:#FBF2BD; padding:5px;text-align:center;top:20px;left:20px}
p{position:absolute;top:200px;left:200px;background:#FBF2BD}
</style>
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script type="text/javascript">
//是否移动
var mFlag=false;
//鼠标与div左上角相对位置
var divX,divY;
$(function(){
$(".divDrag1").bind("click mousedown mousemove mouseup", function(e){
if (event.type == 'click') {
}else if(event.type == 'mousedown') {
mFlag=true;
divX =e.pageX - parseInt($(".divDrag1").css("left"));
divY =e.pageY - parseInt($(".divDrag1").css("top"));
$(".divDrag1").fadeTo(20,0.5);//点击后开始拖动并透明
}else if(event.type == 'mousemove') {
if(mFlag){
//画出新坐标
$(".divDrag1").css({top:e.pageY-divY,left:e.pageX-divX});
$('#mx').text(e.pageX);$('#my').text(e.pageY);
$('#cx').text(divX);$('#cy').text(divY);
$('#dx').text(e.pageX-divX);$('#dy').text(e.pageY-divY);
}
}else if(event.type == 'mouseup') {
mFlag=false;
$(".divDrag1").fadeTo("fast",1);//松开鼠标后停止移动并恢复成不透明
}
});
})
// 测试js与jquery取值区别
//function clickEvn(){
//alert(document.getElementById("text1").value);
// }
</script>
</head>
<body>
<!-- <div class="divDrag1" id="divDrag1" onclick="clickEvn();" style="padding:69px">移动我吧</div> js只能取到style.padding的属性
<input type="text" id="text1" value="1231"/>
-->
鼠标X:<span id="mx"></span> 鼠标y:<span id="my"></span>
</br>
差值x:<span id="cx"></span> 差值y:<span id="cy"></span>
</br>
左上角x:<span id="dx"></span> 左上角y:<span id="dy"></span>
<div class="divDrag1" id="divDrag1">移动</div>
<p>123131231231312</p>
</body>
</html>
第二个：
这个实现div拖动，并且可以跟上鼠标速度。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.divDrag1{position:absolute;width:100px;height:100px;border:1px solid red;background:#FBF2BD; padding:5px;text-align:center;top:20px;left:20px}
p{position:absolute;top:200px;left:200px;background:#FBF2BD}
</style>
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
//是否移动
var mFlag=false;
//鼠标与div左上角相对位置
var divX,divY;
$(".divDrag1").bind("click mousedown", function(e){
if (event.type == 'click') {
}else i
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
