在拖动的实现原理上，能不能绕过自定义的布尔值变量moveable，只判断一个mousemove事件，如果鼠标移动时，左键处于按下状态，则跟随鼠标移动？
<head>
<title>jQuery -拖动层 q1140215489</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var dragObj=$("#d1")
dragObj.mousedown(function (e){startDrag(e);});
dragObj.mousemove(function (e){drag(e);});
dragObj.mouseup(function (e){stopDrag(e);});
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(e){
x0 = e.clientX;
y0 = e.clientY;
y1=dragObj.offset().top;
x1=dragObj.offset().left;
moveable = true;
}
//拖动;
function drag(e){
if(moveable){
dragObj.css({top:y1 + e.clientY - y0,left:x1 + e.clientX - x0});
}
}
//停止拖动;
function stopDrag(e){
if(moveable){
moveable = false;
}
}
});</script></head><body>
问题：<br/>
1.在谷歌里，每拖一下就会有一声警报声；<br/>
2.在火狐中把块中的文字去掉后再拖动，会有奇迹发生；<br/>
3.在拖动的实现原理上，能不能绕过自定义的布尔值变量moveable，只判断一个mousemove事件，如果鼠标移动时，左键处于按下状态，则跟随鼠标移动？<br/>
<div id="d1" style="position:absolute;width:200px;height:100px;background:green;">拖动
</div>
</body>
</html>
<head>
<title>jQuery -拖动层 q1140215489</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var dragObj=$("#d1")
dragObj.mousedown(function (e){startDrag(e);});
dragObj.mousemove(function (e){drag(e);});
dragObj.mouseup(function (e){stopDrag(e);});
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(e){
x0 = e.clientX;
y0 = e.clientY;
y1=dragObj.offset().top;
x1=dragObj.offset().left;
moveable = true;
}
//拖动;
function drag(e){
if(moveable){
dragObj.css({top:y1 + e.clientY - y0,left:x1 + e.clientX - x0});
}
}
//停止拖动;
function stopDrag(e){
if(moveable){
moveable = false;
}
}
});</script></head><body>
问题：<br/>
1.在谷歌里，每拖一下就会有一声警报声；<br/>
2.在火狐中把块中的文字去掉后再拖动，会有奇迹发生；<br/>
3.在拖动的实现原理上，能不能绕过自定义的布尔值变量moveable，只判断一个mousemove事件，如果鼠标移动时，左键处于按下状态，则跟随鼠标移动？<br/>
<div id="d1" style="position:absolute;width:200px;height:100px;background:green;">拖动
</div>
</body>
</html>
谷歌里又没有警报声了，但是在DIV里没有内容的时候，FF下拖动，mousedown事件还是不响应。
var dragObj=$("#d1");
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
dragObj.bind({
mousedown:function(e){
x0 = e.clientX;
y0 = e.clientY;
y1=dragObj.offset().top;
x1=dragObj.offset().left;
moveable = true;
},
mousemove :function(e){
if(moveable){
dragObj.css({top:y1 + e.clientY - y0,left:x1 + e.clientX - x0});
}
},
mouseout :function(e){
stopDrag(e);
},
mouseup :function(e){
stopDrag(e);
}
});
//停止拖动;
function stopDrag(e){
if(moveable){
moveable = false;
}
}
});
确实是，我又改了下，当拖动的事件触发范围变小的时候，问题会更加严重，你看下~http://www.miaov.com --这个网站上的拖动效果就实现的非常完美。<!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>
<title>jQuery -拖动层 q1140215489</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
Drag($("#msgbox"),$("#title"));
//拖动函数
function Drag(dragObj,dragEvent){//dragObj可拖动的窗口；dragEvent拖动事件触发的区域
//注册事件
dragEvent.mousedown(function (e){startDrag(e);});
dragEvent.mousemove(function (e){drag(e);});
dragEvent.mouseup(function (e){stopDrag(e);});
dragEvent.mouseout(function (e){stopDrag(e);});
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(e){
x0 = e.clientX;
y0 = e.clientY;
y1=dragObj.offset().top;
x1=dragObj.offset().left;
moveable = true;
}
//拖动;
function drag(e){
if(moveable){
dragObj.css({top:y1 + e.clientY - y0,left:x1 + e.clientX - x0});
}
}
//停止拖动;
function stopDrag(e){
if(moveable){
moveable = false;
}
}
}
});
</script>
</head>
<body>
问题：<br/>
1.在火狐中把块中的文字去掉后再拖动，拖动第二次时，mousedown事件没有响应；<br/>
2.<b>拖动速度较快时，拖动块跟不上鼠标</b>，尤其当可拖动区域变小时，这种现象尤为严重；<br/>
3.在拖动的实现原理上，能不能绕过自定义的布尔值变量moveable，只判断一个mousemove事件，如果鼠标移动时左键处于按下状态，则拖动层；<br/><br/>
http://www.miaov.com/--这个页面上的拖动就实现的很完美。<br/><br/><div id="msgbox" style="width:200px;height:100px;position:absolute;background:green;">
<div id="title" style="height:30%;background:black;cursor:move;color:white">拖动</div>
</div>
</body>
</html>
实现原理上还是用到了if(moveable){
这个办法在事件触发区域比较小或者鼠标移动较快的时候，就会很不灵敏。
还有别的办法不？
比如鼠标移动时判断鼠标按键的状态，如果左键处于按下状态，那么拖动。http://www.miaov.com 这个就实现的很完美。