在寫這篇文章之前我一直在糾結一個問題，那就是以前實現的拖動拖快了總會有一些卡頓，脫節，不流暢，只能輕輕的小心翼翼的慢慢的拖拽，這樣就失去了web頁面中窗口拖動的意義，所以在這兒我分享出來和大家一起共同進步。
首先說一下javascript+div拖動的原理：
1.要拖動必然要觸發3個事件，鼠標左鍵按下去（onmousedown）, 移動鼠標（onmousemove）, 釋放鼠標左鍵（onmouseup）.
2.拖動之前必須要對目標對象（也就是需要拖動的div）進行初始化事件綁定，下面代碼里面會詳細介紹
3.下面就是拖動的詳細步驟了，首先也拖動對象綁定一個onmousedown事件函數，這個事件函數里面控制一個狀態，是否准備好拖動，獲取拖動對象的坐標位置（這個坐標位置是相當於瀏覽器的）。然后在給document對象綁定onmousemove, 在onmousemove事件里面做捕獲鼠標的坐標，讓拖動對象的位置跟隨鼠標的位置，重兒就實現了拖動。但拖到一定的位置總得停下來吧， 好，這個onmouseup事件處理函數就用上了，在這個事件函數里面只做一個事，那就是把拖動狀態改為拖動停止。最后一點說說為什么要把onmousemove事件函數綁定在document上面而不是拖動對象上，如果是綁定在拖動對象上面就會出現本文開頭說的卡頓， 脫節，不流暢，反正就是有各種不和諧因素。原因我也不是很明白，我想可能跟瀏覽器內部實現機制有關嘛， 如果有哪位大神知道請不吝賜教。
下面是源碼，都很簡單，我不是用javascript對象的方式去封裝的，只要有一些簡單的javascript，dom, css知識的都能看懂， 還有本人是第一次寫博客，還請各位看官多提意見多多拍磚。
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 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 6 <title>drag</title> 7 8 <script type="text/javascript" language="javascript"> 9 window.onload = function() { 10 var drag = document.getElementById("box"); 11 var x = 0, //初始化拖放對象的x坐標 12 y = 0, //初始化拖放對象的y坐標 13 isMove = false; //初始化拖放對象的狀態， false停止移動，true開始移動 14 //開始移動 15 drag.onmousedown = function(e) { 16 isMove = true; 17 var evt = e || window.event; 18 //獲取鼠標的位置，兼容多瀏覽器 19 x = evt.pageX ? evt.pageX : evt.clientX; 20 y = evt.pageY ? evt.pageY : evt.clientY; 21 x -= this.getBoundingClientRect().left; //獲取拖動對象的x坐標 22 y -= this.getBoundingClientRect().top; //獲取拖動對象的y坐標 23 }; 24 //移動中.. 25 document.onmousemove = function(e) { 26 if(isMove) { 27 var evt = e || window.event; 28 var ox = evt.pageX ? evt.pageX : evt.clientX; 29 var oy = evt.pageY ? evt.pageY : evt.clientY; 30 drag.style.left = (ox - x)+'px'; 31 drag.style.top = (oy - y)+'px'; 32 } 33 }; 34 //結束移動 35 document.onmouseup = function() { 36 isMove = false; 37 }; 38 }; 39 </script> 40 41 <style type="text/css"> 42 </style> 43 44 </head> 45 46 <body> 47 <div id="box" style="border:1px solid orange;width:50px;height:50px;cursor:move;position:absolute;left:100px;top:100px;background-color:white;"></div> 48 </body> 49 50 </html>
drag