你的位置:首页 > 网页设计

[网页设计]简单的鼠标可拖动div 兼容IE/FF


一个简单的可拖动div,随着鼠标的移动,div可随之走动

 

主要思路:

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

并继而转为监测onmousemove事件,在鼠标移动事件中更新div对象的位置属性

鼠标松开的时候解除监听,更新位置完成。

 

需要注意的两点

1.更新对象的位置需要用到o.style.left等,这些CSS属性只能内嵌才能被访问到:

<div id="box" style="left:200px;top:200px;"> box </div>

放在<style></style>中是无法访问的,比如:

#box{position: absolute;left:200px;top:200px;width: 200px;}

假如这样做,显示的是无法获取值,请看举例:

//  alert(e.clientX+" -- " + o.style.left+" -- "+ X);

这样的结果为 :(详情看后边代码)

 

2. FireFox中是不能直接取event对象的,一般我们都会简单地使用 e = e || event 来区分,其中e是相应于FF中函数的参数部分

比如:

 document.getElementById("box").onmousedown = function(e){     getObject(this,e||event);    //box捕获事件并处理 e-->FF window.event-->IE  };

当然有些时候也可以这样考虑:使用全局对象arguments[0]来替代捕获到的事件参数

//  dis = arguments[0]||window.event;  //如果上面那句在FF下无法获取事件,听说可以通过 arguments[0]获取FF下的事件对象

 

对于拖拽事件这里使用到了另外一种常用的方法:

// document.all(IE)使用setCapture方法绑定;其余比如FF使用Window对象针对事件的捕捉    document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE); // document.all(IE)使用releaseCapture解除绑定;其余比如FF使用window对象针对事件的捕捉    document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

 

最后是一个可随鼠标拖动的div

代码,有注释,希望能理解:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style type="text/css">  #box{position: absolute;left:200px;top:200px;width: 200px;border:1px solid #333;height: 200px;background-color: #009cc9;text-align: center;}</style></head><body>  <div class="wrap">    <div id="box" style="left:200px;top:200px;"> box </div>  </div>  <script type="text/javascript">  var o,  //捕获到的事件     X, //box水平宽度     Y; //box垂直高度  function getObject(obj,e){  //获取捕获到的对象    o = obj;    // document.all(IE)使用setCapture方法绑定;其余比如FF使用Window对象针对事件的捕捉    document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);     X = e.clientX - parseInt(o.style.left);  //获取宽度,    Y = e.clientY - parseInt(o.style.top);  //获取高度,  //  alert(e.clientX+" -- " + o.style.left+" -- "+ X);  }  document.getElementById("box").onmousedown = function(e){     getObject(this,e||event);    //box捕获事件并处理 e-->FF window.event-->IE  };  document.onmousemove = function(dis){  //鼠标移动事件处理    if(!o){  //如果未获取到相应对象则返回      return;    }    if(!dis){ //事件      dis = event ;    //  dis = arguments[0]||window.event;  //如果上面那句在FF下无法获取事件,听说可以通过 arguments[0]获取FF下的事件对象    }    o.style.left = dis.clientX - X +"px";   //设定box样式随鼠标移动而改变    o.style.top = dis.clientY - Y + "px";  };  document.onmouseup = function(){  //鼠标松开事件处理    if(!o){  //如果未获取到相应对象则返回      return;    }    // document.all(IE)使用releaseCapture解除绑定;其余比如FF使用window对象针对事件的捕捉    document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)    o = '';  //还空对象  };  </script></body></html>