一個簡單的可拖動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>