简单的js实现拖拽出现的问题
-1
悬赏园豆：100
[已解决问题]
解决于 2011-10-14 14:41
<!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"/>
<script type="text/javascript" src="jquery.js" language="javascript"></script>
<title>JS模拟拖拽</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
width:150px;
height:100px;
border:3px solid #06C;
overflow:auto;
margin:70px auto;
position:absolute;
}
#topBar{
width:150px;
height:70px;
background:#FF9;
}
</style>
<script type="text/javascript">
var this_x=0,this_y=0; //记录鼠标开始时相对于拖放对象的位置
var drag_x=0,drag_y=0; //记录拖拽对象的位置
var mouse_x=0,mouse_y=0; //记录鼠标的位置
var flag=false; //判断是否拖动
$(document).ready(function() {
//鼠标按下，开始拖拽
$("#box #topBar").mousedown(function(event){
ready_drag(event);
});
//停止拖拽
$(document).mouseup(function(){
//alert("ss");
flag=false;
$("#value").html("当前状态：拖放结束");
$("#topBar").css("cursor","default");
})
});
function ready_drag(event)
{
$("#value").html("当前状态：开始拖放");
$("#topBar").css("cursor","move");
flag=true;
mouse_x=event.clientX;
mouse_y=event.clientY;
var drag=$("#box");
//获取拖拽对象相对于页面的位置
drag_x=drag.attr("offsetLeft");
drag_y=drag.attr("offsetTop");
//得到鼠标相对于拖拽对象的位置
this_x=mouse_x-drag_x;
this_y=mouse_y-drag_y;
//鼠标移动开始执行拖拽程序
$(document).mousemove(function(event){
if(flag==true)
{ drag_start(this_x,this_y,event); } })
}
function drag_start(this_x,this_y,event)
{
var mouse_x=event.clientX;
var mouse_y=event.clientY;
drag_x = mouse_x-this_x;
drag_y = mouse_y-this_y;
$("#value").html("鼠标的位置：X:"+mouse_x+"Y:"+mouse_y+"");
$("#box").css("left",drag_x);
$("#box").css("top",drag_y-50);
}
</script>
</head>
<body>
<div id="box">
<div id="topBar">
</div>
</div>
<div id="value"></div>
</body>
</html>
这是我做的一个简单的拖拽（的确是很简单。。。），但是出现了点问题：
1. 就是第二次拖拽的时候就不成功了（此问题出现在火狐上），这是什么原因呢？
2.为什么拖拽对象的位置变化比鼠标的慢呢？？在ie上还会很卡，代码应该怎么优化呢？
谢啦~~~~
最佳答案
1
1,修改样式，如下#topBar
#topBar{
width:150px;
height:70px;
background:#FF9;
overflow-x: hidden;
overflow-y: hidden;
}
也就是增加
overflow-x: hidden;
overflow-y: hidden;
就能解决在火狐中的问题。
2，对象的位置变化比鼠标慢，以及IE上会卡，我用的jquery1.4，在ie7,火狐7，chrome13中测试的，速度还行。其实计算很简单的，只要记录拖动前的控件位置、拖动前的鼠标位置，在结束拖动时用：拖动前的控件位置+当前鼠标位置-拖动前的鼠标位置。
收获园豆：80
试了一下你的第一种方法，结果还是有问题啊
@呦菜: 说下你的测试浏览器的版本。我的是firefox 7.0.1,没增加overflow-x的时候只能操作第一次，增加了以后可以正常了。我把修改后的全部代码粘贴在这里，你仔细再测一下。
<!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"/>
<script type="text/javascript" src="jquery.js" language="javascript"></script>
<title>JS模拟拖拽</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
width:150px;
height:100px;
border:3px solid #06C;
overflow:auto;
margin:70px auto;
position:absolute;
}
#topBar{
width:150px;
height:70px;
background:#FF9;
overflow-x: hidden; overflow-y: hidden;
}
</style>
<script type="text/javascript">
var this_x=0,this_y=0; //记录鼠标开始时相对于拖放对象的位置
var drag_x=0,drag_y=0; //记录拖拽对象的位置
var mouse_x=0,mouse_y=0; //记录鼠标的位置
var flag=false; //判断是否拖动
$(document).ready(function() {
//鼠标按下，开始拖拽
$("#box #topBar").mousedown(function(event){
ready_drag(event);
});
//停止拖拽
$(document).mouseup(function(){
//alert("ss");
flag=false;
$("#value").html("当前状态：拖放结束");
$("#topBar").css("cursor","default");
})
});
function ready_drag(event)
{
$("#value").html("当前状态：开始拖放");
$("#topBar").css("cursor","move");
flag=true;
mouse_x=event.clientX;
mouse_y=event.clientY;
var drag=$("#box");
//获取拖拽对象相对于页面的位置
drag_x=drag.attr("offsetLeft");
drag_y=drag.attr("offsetTop");
//得到鼠标相对于拖拽对象的位置
this_x=mouse_x-drag_x;
this_y=mouse_y-drag_y;
//鼠标移动开始执行拖拽程序
$(document).mousemove(function(event){
if(flag==true)
{ drag_start(this_x,this_y,event); } })
}
function drag_start(this_x,this_y,event)
{
var mouse_x=event.clientX;
var mouse_y=event.clientY;
drag_x = mouse_x-this_x;
drag_y = mouse_y-this_y;
$("#value").html("鼠标的位置：X:"+mouse_x+"Y:"+mouse_y+"");
$("#box").css("left",drag_x);
$("#box").css("top",drag_y-50);
}
</script>
</head>
<body>
<div id="box">
<div id="topBar">
</div>
</div>
<div id="value"></div>
</body>
</html>
@LCM: 哦，可以了，谢啦~~~
其他回答(2)
0
drag_x=drag.attr("offsetLeft"); drag_y=drag.attr("offsetTop");
这个返回的是string类型，在与数字加的时候，是直接连接的。如“12px” + 4 = ”12px4“
IE下卡，把select事件禁用会好点。
如果对您有帮助，请访问以下我的taobao店铺
店铺网址：http://shop69093164.taobao.com/ 欢迎广大朋友访问，新店开张，专卖OL女装，厂家直销，折扣多多，优惠多多
收获园豆：20
第一个还真是没想到啊，谢谢提醒，另外你说的把select事件禁用会好点是怎么回事？
0
mousemove 性能不高 那什么高啊？