来源：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>
时间： 2024-12-29 11:57:29