上圖中綠色箭頭指向的分別是3個事件，大概的意思是：滑鼠單擊div#box元素後，啟用了document.onmousemove滑鼠移動事件，在移動滑鼠時，會改變div#box的left、top值，從而達到div#box元素隨著滑鼠移動。單滑鼠放開時觸發了document.onmouseup滑鼠鬆開事件，在滑鼠鬆開事件裡把document.onmousemove事件設為null，這時div#box就不會隨滑鼠移動了。
在上圖中還有一項重要的事情，就是座標的計算，他關係到div#box元素移動的是不是流暢、是不是準確。圖上的標出的8個變數是主要要計算的變數：px、py、ol、ot、px1、py1、l、t，它們代表的意思如下圖所示。
下圖中div#box從1號位置移動到了2號位置，黃色小圓點是是滑鼠單擊的位置。然後需要介紹一下ev.clientx/ev.clienty與ev.pagex/ev.pagey的區別:
。。。。。。。。。。。。。。
。。。。。。。。。。。。。。
許你一城個人部落格
滑鼠拖拽調整div大小
lang en charset utf 8 titletitle body,html container item style head body container class item div div 需要調整尺寸的div let c document.getelementbyid contai...
滑鼠拖拽改變物件的屬性，滑鼠拖拽DIV移動
常用document.onmousemove做的一些事情 the time of writing 2013 4 11 written by 吳志強 window.onload function else mousemove odiv1,left top ev,function 滑鼠拖動時執行函式 f...
實現Div拖拽
直觀的理解div拖拽 當滑鼠對著可拖拽部分按住後並拖動，div會跟著滑鼠一起運動，並且其運動空間限制在瀏覽器內部，當放開滑鼠時，則div停止運動。實現div拖拽需要三個重要的事件 1 onmousedown 滑鼠按下事件 2 onmousemove 滑鼠移動事件 3 onmouseup 滑鼠抬起事件...