关于拖动DIV的问题
时间：2009-09-29
来源：互联网
<!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=utf-8" />
<title>next的用法</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var _x;var _y;
var _xx;var _yy;
$('#drag').mousedown(function(event){
var offset = $(this).offset();
_x=event.clientX-offset.left;
_y=event.clientY-offset.top;
}).mousemove(function(even){
_xx=even.clientX-_x;
_yy=even.clientY-_y;
$('#drag').css('top',_yy);
$('#drag').css('left',_xx);
}).mouseup(function(event){
$(this).unbind('mousemove');
})
});
</script>
</head>
<body>
<div id="drag" style="border:solid;width:70px;height:70px;left:auto;top:auto; position:absolute;"></div>
</body>
</html>
这个拖动DIV只执行一次。。然后就不能拖动了。。。这是为什么？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>next的用法</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var _x;var _y;
var _xx;var _yy;
$('#drag').mousedown(function(event){
var offset = $(this).offset();
_x=event.clientX-offset.left;
_y=event.clientY-offset.top;
}).mousemove(function(even){
_xx=even.clientX-_x;
_yy=even.clientY-_y;
$('#drag').css('top',_yy);
$('#drag').css('left',_xx);
}).mouseup(function(event){
$(this).unbind('mousemove');
})
});
</script>
</head>
<body>
<div id="drag" style="border:solid;width:70px;height:70px;left:auto;top:auto; position:absolute;"></div>
</body>
</html>
这个拖动DIV只执行一次。。然后就不能拖动了。。。这是为什么？
[ 此帖被shoot在2009-09-30 20:58重新编辑 ]
作者: shoot 发布时间: 2009-09-29
关注ing 
作者: yssky 发布时间: 2009-09-29
没人。。。。。。。。。。。。 作者: shoot 发布时间: 2009-09-29
因为你 $(this).unbind('mousemove');
作者: lrmymycn 发布时间: 2009-09-29
引用
引用第3楼lrmymycn于2009-09-29 21:25发表的 :
因为你 $(this).unbind('mousemove');
因为你 $(this).unbind('mousemove');
不加上这个的话。。。MOUSEDOWN之后。。这个DIV就无时无刻都跟着鼠标移动了。。。。。
作者: shoot 发布时间: 2009-09-29
$('#drag').mousedown(function(event){
var offset = $(this).offset();
_x=event.clientX-offset.left;
_y=event.clientY-offset.top;
$(this).mousemove(function(even){
_xx=even.clientX-_x;
_yy=even.clientY-_y;
$('#drag').css('top',_yy);
$('#drag').css('left',_xx);
});
var offset = $(this).offset();
_x=event.clientX-offset.left;
_y=event.clientY-offset.top;
$(this).mousemove(function(even){
_xx=even.clientX-_x;
_yy=even.clientY-_y;
$('#drag').css('top',_yy);
$('#drag').css('left',_xx);
});
作者: ziyou 发布时间: 2009-09-30
123
作者: fudg1211 发布时间: 2009-09-30
没人帮忙。。。。。。。。。 作者: shoot 发布时间: 2009-09-30
知道了。。刚开始没有绑定事件。。。 作者: shoot 发布时间: 2009-09-30
邦定什么，and how?
作者: cedar 发布时间: 2009-10-03
bind的用法自己可以去查下。。。
<!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=utf-8" />
<title>DIV拖动</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#drag").bind("mousedown",dragDown);
var _x,_y,_xx,_yy;
function dragDown(e){
var e = e||event,offset = $(this).offset();
_x=e.clientX-offset.left;
_y=e.clientY-offset.top;
$(document).bind("mousemove",dragMove);
$("#drag").bind("mouseup",dragUp);
}
function dragMove(e){
var e = e||event;
_xx=e.clientX-_x;
_yy=e.clientY-_y;
$('#drag').css('top',_yy);
$('#drag').css('left',_xx);
}
function dragUp(e){
$(document).unbind("mousemove",dragMove);
$("#drag").unbind("mouseup",dragUp);
}
})
</script>
</head>
<body>
<div id="drag" style="border:solid;width:70px;height:70px;left:auto;top:auto; position:absolute;"></div>
</body>
</html>
<!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=utf-8" />
<title>DIV拖动</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#drag").bind("mousedown",dragDown);
var _x,_y,_xx,_yy;
function dragDown(e){
var e = e||event,offset = $(this).offset();
_x=e.clientX-offset.left;
_y=e.clientY-offset.top;
$(document).bind("mousemove",dragMove);
$("#drag").bind("mouseup",dragUp);
}
function dragMove(e){
var e = e||event;
_xx=e.clientX-_x;
_yy=e.clientY-_y;
$('#drag').css('top',_yy);
$('#drag').css('left',_xx);
}
function dragUp(e){
$(document).unbind("mousemove",dragMove);
$("#drag").unbind("mouseup",dragUp);
}
})
</script>
</head>
<body>
<div id="drag" style="border:solid;width:70px;height:70px;left:auto;top:auto; position:absolute;"></div>
</body>
</html>
作者: shoot 发布时间: 2009-10-03
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动层</title>
<style type="text/css">
#div2
{
position:absolute;
width:400px;
height:300px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:13px;
left:80px;
top:20px;
}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.2.6-vsdoc-cn.js"></script>
<script type="text/javascript" language="javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
$("#div2").click(function(){
//alert("click");//点击（松开后触发）
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($("#div2").css("left"));
_y=e.pageY-parseInt($("#div2").css("top"));
$("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#div2").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="div2">支持拖拽</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动层</title>
<style type="text/css">
#div2
{
position:absolute;
width:400px;
height:300px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:13px;
left:80px;
top:20px;
}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.2.6-vsdoc-cn.js"></script>
<script type="text/javascript" language="javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
$("#div2").click(function(){
//alert("click");//点击（松开后触发）
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($("#div2").css("left"));
_y=e.pageY-parseInt($("#div2").css("top"));
$("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#div2").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="div2">支持拖拽</div>
</body>
</html>
作者: dnangler 发布时间: 2009-11-19
这是由于你在mouseup方法中用了$(this).unbind("mousemove");的结果，这样会导致下一次拖动的时候mousemove方法无效。
解决方法：在mousedown方法中绑定mousemove方法，这样每次按下鼠标的时候都会对mousemove方法进行绑定，mouseup
方法中的$(this).unbind("mousemove");就不会影响下一次拖动。
附上源代码给你参考一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<style type="text/css">
.show{
background:#7cd2f8;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x, y, i=1;
$(".show").mousedown(function(e){
$(this).css("cursor","move"); //换鼠标的标签
$(this).css("z-index", 3); //把当前的模块设置为最前面
var offset = $(this).offset(); //获取当前模块的坐标
x = e.pageX - offset.left; //计算当前模块和当前鼠标的相对位置
y = e.pageY - offset.top;
$(this).bind("mousemove",function(ev){ //绑定鼠标移动时的动作
var _x = ev.pageX - x; //让当前模块跟着鼠标移动
var _y = ev.pageY - y;
$(this).css({"left":_x, "top":_y});
});
}).mouseout(function(){
$(this).unbind("mousemove"); //取消当前模块的鼠标移动事件(不取消会出现模块紧跟鼠标的现象)
$(this).css("z-index", 1);
}).mouseup(function(){
$(this).unbind("mousemove");
$(this).css("z-index", 1);
});
$("#add").click(function(){
var $clone = $(".show").clone(true).html(++i);
$("body").append($clone);
});
});
</script>
</head>
<body>
<input type="button" value="增加" id="add"/>
<div class="show">
1
</div>
</body>
</html>
解决方法：在mousedown方法中绑定mousemove方法，这样每次按下鼠标的时候都会对mousemove方法进行绑定，mouseup
方法中的$(this).unbind("mousemove");就不会影响下一次拖动。
附上源代码给你参考一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<style type="text/css">
.show{
background:#7cd2f8;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x, y, i=1;
$(".show").mousedown(function(e){
$(this).css("cursor","move"); //换鼠标的标签
$(this).css("z-index", 3); //把当前的模块设置为最前面
var offset = $(this).offset(); //获取当前模块的坐标
x = e.pageX - offset.left; //计算当前模块和当前鼠标的相对位置
y = e.pageY - offset.top;
$(this).bind("mousemove",function(ev){ //绑定鼠标移动时的动作
var _x = ev.pageX - x; //让当前模块跟着鼠标移动
var _y = ev.pageY - y;
$(this).css({"left":_x, "top":_y});
});
}).mouseout(function(){
$(this).unbind("mousemove"); //取消当前模块的鼠标移动事件(不取消会出现模块紧跟鼠标的现象)
$(this).css("z-index", 1);
}).mouseup(function(){
$(this).unbind("mousemove");
$(this).css("z-index", 1);
});
$("#add").click(function(){
var $clone = $(".show").clone(true).html(++i);
$("body").append($clone);
});
});
</script>
</head>
<body>
<input type="button" value="增加" id="add"/>
<div class="show">
1
</div>
</body>
</html>
作者: h-sai 发布时间: 2010-01-04
作者: liudongyue 发布时间: 2010-01-18
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
