简单的鼠标可拖动div 兼容IE/FF

来源：http://www.cnblogs.com/imwtr/p/4355416.html

作者：

主要思路：

一个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

代码，有注释,希望能理解：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Examples</title>
 6 <meta name="description" content="">
 7 <meta name="keywords" content="">
 8 <link href="" rel="stylesheet">
 9 <style type="text/css">
10     #box{position: absolute;left:200px;top:200px;width: 200px;border:1px solid #333;height: 200px;background-color: #009cc9;text-align: center;}
11 </style>
12 </head>
13 <body>
14     <div class="wrap">
15         <div id="box" style="left:200px;top:200px;"> box </div>
16     </div>
17     <script type="text/javascript">
18     var o,   //捕获到的事件
19           X,  //box水平宽度
20           Y;  //box垂直高度
21     function getObject(obj,e){    //获取捕获到的对象
22         o = obj;
23         // document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉
24         document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
25         X = e.clientX - parseInt(o.style.left);   //获取宽度，
26         Y = e.clientY - parseInt(o.style.top);   //获取高度，
27     //    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);
28     }
29     document.getElementById("box").onmousedown = function(e){
30         getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE
31     };
32     document.onmousemove = function(dis){    //鼠标移动事件处理
33         if(!o){    //如果未获取到相应对象则返回
34             return;
35         }
36         if(!dis){  //事件
37             dis = event ;
38         //    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件，听说可以通过 arguments[0]获取FF下的事件对象
39         }
40         o.style.left = dis.clientX - X +"px";     //设定box样式随鼠标移动而改变
41         o.style.top = dis.clientY - Y + "px";
42     };
43     document.onmouseup = function(){    //鼠标松开事件处理
44         if(!o){   //如果未获取到相应对象则返回
45             return;
46         }
47         // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉
48         document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
49         o = '';   //还空对象
50     };
51     </script>
52 </body>
53 </html>

简单的鼠标可拖动div 兼容IE/FF相关推荐

一个简单的拖动层(兼容IE,FF)
Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
api游戏编程鼠标选择拖动_如何选择合适的游戏鼠标
api游戏编程鼠标选择拖动 You don't need a gaming mouse to play PC games-just about any mouse with two buttons a ...
可拖动DIV层的实现方法
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展,其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示,为了做一个较为完善的拖动层,花费了很长时间进行设计与调试.在此把心得总结了 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
【JS】实现拖动div右侧改变,改变div宽度 /及拖动div的整理
先看看效果吧. [拖动右侧改变div的宽度] 一开始也挺蒙的,不晓得思路,我就思考,先是获取到右侧的边缘->触发事件->拖动-->改变宽度; 然后都不晓得怎么实现.我发挥面向百度 ...
简单实现鼠标移上去显示所有文字，移走又隐藏
简单实现鼠标移上去显示所有文字,移走又隐藏,并且会依据你鼠标的位置,相应的发生改变. jsp代码: <div id="allDiv" style="border:s ...
css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...

简单的鼠标可拖动div 兼容IE/FF

简单的鼠标可拖动div 兼容IE/FF相关推荐

最新文章

热门文章