javascript移动对象有关问题

2012-02-16

javascript移动对象问题DragMe.js代码var x,yvar z,downfalsefunction init(e){e.setCapture()//设置

javascript移动对象问题
DragMe.js代码
var x,y;

var z,down=false;

function init(e){
e.setCapture(); //设置属于当前对象的鼠标捕捉
z=e.style.zIndex; //获取对象的z轴坐标值
//设置对象的z轴坐标值为10000，确保当前层显示在最前面
e.style.zIndex=10000;
x=event.clientX; //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.clientY; //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true; //布尔值，判断鼠标是否已按下，true为按下，false为未按下
}

function moveit(e){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
//if(down&&event.srcElement==obj){
if(down){
with(e.style){
posLeft=event.clientX-x;
posTop=event.clientY-y;
}
}
}

function stopdrag(e){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false
e.style.zIndex=z; //还原对象的Z轴坐标值
e.releaseCapture(); //释放当前对象的鼠标捕捉
down=false;
}

运行页代码
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> neverOnlineMap - http://www.never-online.net </title>
<script type="text/javascript" language="javascript" src="Scripts/DragMe.js"></script>
<style type="text/css">

.dragme{position:relative; cursor:hand;}
.doit{position:relative; cursor:hand;}
</style>

</head>
<body>
<img onmousedown="init(this);" onmousemove="moveit(this);" onmouseup="stopdrag(this);" class="doit" name="fddd" src="images/btn_34_off.gif" id="img34" alt="鹰眼" title="鹰眼" />


<div align="center">
<div style="width:0" id="test" onmousedown="init(this);" onmousemove="moveit(this);" onmouseup="stopdrag(this);" class="doit" >
<table border='1' cellpading='0' cellspacing='0'>
<tr>
<td align='center'>
<img id='GisImage' src="http://www.dzend.com/images/icons/16.gif" hspace='0px' vspace='0px'/>
</td>
</tr>
<tr>
<td id='GisLabel'>4535kjsdfklsjd342543</td>
</tr>
</table>
</div>
<div style='width:0;height:0'class='dragme'>
<table border='0' cellpading='0' cellspacing='0'>
<tr>
<td align='center'>
<img id='GisImage1' hspace='0px' vspace='0px' style='cursor:hand' />
</td>
</tr>
<tr>
<td id='GisLabel1'>3456456</td>
</tr>
</table>
</div>
<img src="http://www.dzend.com/images/icons/16.gif" class="dragme"><br><br>

<img src="http://www.dzend.com/images/icons/22.gif" class="dragme">

</div>

<p>

<font>用鼠标可以拖动图片<br>

by <a href="http://www.dzend.com">dzend</a></font>

</p>
<div onmousedown="init(this);" onmousemove="moveit(this);" onmouseup="stopdrag(this);" class="doit" style='position:absolute;left:0px;top:0px;overflow:auto;width:245px;height:100px'>
<div class="query" >81  清华小学
</div>
<div class="query">104  明德小学
</div>
<div class="query">271  白求恩医科大学
</div>
</div>
</body>
</html>

现在的问题是,为什么我移动的对象再移动后,对象回先返回原来的位置?请问原因在哪里?

[解决办法]
你的好复杂哦```有那麻烦吗
///////////////
<script>
var offy;
var offx;
//offy,offx保存了鼠标按下的位置在被拖曳物体内的相对坐标

function drag() {
alll.style.position = "absolute";
alll.style.top=event.clientY+document.body.scrollTop-offy;
alll.style.left=event.clientX+document.body.scrollLeft-offx;
return true;
}// 鼠标跟随用的函数

function start_drag() {
offy=event.offsetY;
offx=event.offsetX;
document.onmousemove=drag;
}//开始拖曳(使鼠标跟随有效)

function stop_drag() {
alll.style.position = "absolute";
document.onmousemove=null;
}//停止拖曳(使鼠标跟随失效)
</script>

<div id=alll style="height:200;background:#345;width=200" onmousedown="start_drag()" onmouseup="stop_drag()"

onmouseout="stop_drag()">有那样麻烦吗</div>
[解决办法]
<script language="JavaScript">
var x,y

var z,down=false;

function init(e){
e.setCapture(); //设置属于当前对象的鼠标捕捉
z=e.style.zIndex; //获取对象的z轴坐标值
//设置对象的z轴坐标值为10000，确保当前层显示在最前面
e.style.zIndex=10000;
x=event.clientX; //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.clientY; //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true;
left1=e.style.posLeft
top1=e.style.posTop
//布尔值，判断鼠标是否已按下，true为按下，false为未按下
}

function moveit(e){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
//if(down&&event.srcElement==obj){
if(down){
with(e.style){
posLeft=parseInt(left1)+event.clientX-x
posTop=parseInt(top1)+event.clientY-y;

}
}
}

function stopdrag(e){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false

e.style.zIndex=z; //还原对象的Z轴坐标值
e.releaseCapture(); //释放当前对象的鼠标捕捉
down=false;
}
</script>
你没有记录该曾初始的的值，红色标记出来了

热点排行