简单的鼠标可拖动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 xmlns="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>