DIV移动的问题,求助~! 本帖最后由 h123hu 于 2012-02-21 19:55:23 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 虽然是dragDivLeft-1,但实际上你算出来的dragDivLeft比原来大1,设置节点调试下吧。 不是很明白,如果当前的dragDivLeft是100,那么,100-1不是99么?难道是这个获取的当前坐标不准确导致的?dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标 dragDivLeft-1+'px';是不是呗算成字符串的链接操作了 我断点看了一下,dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标这个每次获得的坐标数值都增加了8个左右的像素所以,我即使减1,也无补于事我不明白的是,如果当前的坐标是100的话,他为什么获得的至少是108呢? <!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>无标题文档</title><style type="text/css">#div1{ width:948px; height:40px; overflow:hidden; position:relative; border:1px #efefef solid; }#div2{ width:40px; height:40px; overflow:hidden; position:absolute; background-color:#bf0000; top:0px; left:0px; }</style><script type="text/javascript">function getById(obj){ return document.getElementById(obj); }//获取鼠标坐标function getMouseXY(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 }; }window.onload=function(){ var div1=getById('div1');//获取父级ID var dragDiv=getById('div2');//获取子级ID var dragDivLeft=0;//模块左坐标 var mouseLeft=0;//鼠标的左坐标 var moveDis=0;//模块的移动距离 dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式 var time=[];//向右计时器 var output = function (id, text) { document.getElementById(id).innerHTML += text + '<br/>'; };//数值返回查看器 div1.onmousedown=function(ev) { var oEvent=ev||event; mouseLeft=getMouseXY(oEvent).x;//获取鼠标左坐标 moveDis=mouseLeft-dragDiv.offsetLeft;//模块移动的距离=鼠标的左坐标-模块当前的左坐标 var i=0; var leftMove=false; time.push(setInterval(function () { dragDivLeft=dragDiv.offsetLeft;//模块左坐标 var newmoveDis=mouseLeft-dragDivLeft;//模块移动的距离=鼠标的左坐标-模块当前的左坐标 //向右 if(moveDis>=0) { //只有当鼠标的左坐标-模块的左坐标>0时,并且模块左坐标+自己的宽度<父级模块的宽度时,模块才能向右移动 if(newmoveDis>=0 && dragDivLeft+dragDiv.offsetWidth<=div1.offsetWidth){ dragDiv.style.left=dragDivLeft+1+'px'; output('p1','右移(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } else { clearInterval(time.shift()); output('p1','停止(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } } //向左 else if(moveDis<=0) { //只有当移动距离<=0,并且模块的左坐标>=0时,模块才能移动 if(newmoveDis<=0 && dragDivLeft>=0) { //这个地方不能相减 dragDiv.style.left=dragDivLeft-1+'px'; output('p1','左移(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } else { clearInterval(time.shift()); output('p1','停止(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } } },1)); }; }</script></head><body><div id="div1"> <div id="div2"></div></div><p id="p1"></p></body></html>dragDivLeft=dragDiv.getBoundingClientRect().left;我把上面的修改为:dragDivLeft=dragDiv.offsetLeft;IE和谷歌下移动是正常的了可是,火狐却有问题:IE和谷歌下移动模块的初始位置是0而且,火狐下是-2,因此,+1不起作用,我明明定义是left:0px;dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式为什么到了火狐下变成left:-2px;了 LS的这个问题好像是IE/ff起始坐标点不同造成的吧!IE好象是(2,2).其他是(0,0)开始!《JS高级程序设计》里面说过。11章! 大神 来救~~ 求救...jsp:索创B/S用户管理系统 ajaxPro.2,无法获取服务器控件的值。 急急 JS与TXT文本的问题。。请高手进,在线等+++++++++++ 有没有人用过 bkheditor?我用win2k ie5.0 浏览demo时报没有权限的错误 请教一个对象数组的问题? 可编辑div中通过某时间动态加入内容后,将光标跳到最后一行 二级联动的复选问题 下拉框另类联动需求。JS高手进来帮看看给点思路吧。急在线等啊。 var a=$("menu");中的$是什么意思啊? 求个匹配指定汉字开头的正则表达式 求教JS与正则的问题
不是很明白,如果当前的dragDivLeft是100,那么,100-1不是99么?难道是这个获取的当前坐标不准确导致的?
dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标
我断点看了一下,
dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标这个每次获得的坐标数值都增加了8个左右的像素
所以,我即使减1,也无补于事我不明白的是,如果当前的坐标是100的话,他为什么获得的至少是108呢?
<!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>无标题文档</title>
<style type="text/css">
#div1{
width:948px; height:40px; overflow:hidden; position:relative; border:1px #efefef solid;
}
#div2{
width:40px; height:40px; overflow:hidden; position:absolute; background-color:#bf0000; top:0px; left:0px;
}
</style>
<script type="text/javascript">
function getById(obj)
{
return document.getElementById(obj);
}//获取鼠标坐标
function getMouseXY(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
};
}window.onload=function()
{
var div1=getById('div1');//获取父级ID
var dragDiv=getById('div2');//获取子级ID
var dragDivLeft=0;//模块左坐标
var mouseLeft=0;//鼠标的左坐标
var moveDis=0;//模块的移动距离
dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式
var time=[];//向右计时器
var output = function (id, text) {
document.getElementById(id).innerHTML += text + '<br/>';
};//数值返回查看器
div1.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseLeft=getMouseXY(oEvent).x;//获取鼠标左坐标
moveDis=mouseLeft-dragDiv.offsetLeft;//模块移动的距离=鼠标的左坐标-模块当前的左坐标
var i=0;
var leftMove=false;
time.push(setInterval(function () {
dragDivLeft=dragDiv.offsetLeft;//模块左坐标
var newmoveDis=mouseLeft-dragDivLeft;//模块移动的距离=鼠标的左坐标-模块当前的左坐标
//向右
if(moveDis>=0)
{
//只有当鼠标的左坐标-模块的左坐标>0时,并且模块左坐标+自己的宽度<父级模块的宽度时,模块才能向右移动
if(newmoveDis>=0 && dragDivLeft+dragDiv.offsetWidth<=div1.offsetWidth){
dragDiv.style.left=dragDivLeft+1+'px';
output('p1','右移(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')');
}
else
{
clearInterval(time.shift());
output('p1','停止(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')');
}
}
//向左
else if(moveDis<=0)
{
//只有当移动距离<=0,并且模块的左坐标>=0时,模块才能移动
if(newmoveDis<=0 && dragDivLeft>=0)
{
//这个地方不能相减
dragDiv.style.left=dragDivLeft-1+'px';
output('p1','左移(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')');
}
else
{
clearInterval(time.shift());
output('p1','停止(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')');
}
}
},1));
};
}
</script>
</head><body>
<div id="div1"> <div id="div2"></div></div>
<p id="p1"></p>
</body>
</html>dragDivLeft=dragDiv.getBoundingClientRect().left;
我把上面的修改为:
dragDivLeft=dragDiv.offsetLeft;IE和谷歌下移动是正常的了可是,火狐却有问题:
IE和谷歌下移动模块的初始位置是0
而且,火狐下是-2,因此,+1不起作用,我明明定义是left:0px;dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式
为什么到了火狐下变成left:-2px;了
IE好象是(2,2).其他是(0,0)开始!
《JS高级程序设计》里面说过。11章!