1. 爱易网页
  2. JavaSript
  3. javascript移动对象有关问题

javascript移动对象有关问题

日期：2014-05-16　 浏览次数：20367 次

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="鹰眼" />
<!--把下列代码加到body区域内,可以给自己的连接加上: class="dragme" -->

<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&nbsp;&nbsp;清华小学
</div>
<div class="query">104&nbsp;&nbsp;明德小学
</div>
<div class="query">2

相关资料更多>

  1. 去年遇到的有关问题，一直羞于问大家！表格有关问题。多谢了
  2. 用javascript获取屏幕高度跟宽度等信息
  3. Javascript select對象操作大全（新增、批改、删除、选中、清空、判断存在等）
  4. 在上面的extjs列表中该如何添加属性让其数量这个字段可以编辑
  5. 求jquery解析复杂的json,该如何处理
  6. EXTJS MVC 使用AjaxProxy与“api”配置选项来支持不同store Url的读取和修改,该如何处理
  7. js封装，类似java、c#中的事件委托。写出来测试不正确，求大师们来指导一下。解决方案
  8. Java和JSP六个常见有关问题
  9. 100-99.1=0.9000000000000057？该怎么处理