用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚

　　JavaScript 的特點是 dom 的處理與網頁效果，大多數情況我們隻用到了這個語言的最簡單的功能，比如制作圖片輪播/網頁的 tab 等等，這篇文章將向你展示如何在自己的網頁上制作拖拽。

　　有很多理由讓你的網站加入拖拽功能，最簡單的一個是數據重組。例如：你有一個序列的內容讓用戶排序，用戶需要給每個條目進行輸入或者用 select 選擇，替代前面這個方法的就是拖拽。或許你的網站也需要一個用戶可以拖曳的導航窗口！那麼這些效果都是很簡單：因為你可以很容易的實現！

　　網頁上實現拖拽其實也不是很複雜。第一你需要知道滑鼠坐標，第二你需要知道用戶滑鼠點擊一個網頁元素並實現拖拽，最後我們要實現移動這個元素。

　　觀看範例

穫取滑鼠移動資訊

　　第一我們需要穫取滑鼠的坐標。我們加一個用戶函數到 document.onmousemove 就可以了︰
<br />document.onmousemove = mouseMove;<br /><br />function mouseMove(ev){<br /> ev = ev || window.event;<br /> var mousePos = mouseCoords(ev);<br />}<br /><br />function mouseCoords(ev){<br /> if(ev.pageX || ev.pageY){<br /> return {x:ev.pageX, y:ev.pageY};<br /> }<br /> return {<br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br /> };<br />}<br />
　　觀看範例

　　你首先要聲明一個 evnet 對象。不論何時你移動滑鼠／點擊／按鍵等等，會對應一個 event 的事件。在 Internet Explorer 裏 event 是全局變量，會被存儲在 window.event 裏。在firefox中，或者其他瀏覽器，event 事件會被相應的自定義函數穫取﹒當我們將 mouseMove 函數賦值於 document.onmousemove，mouseMove 會穫取滑鼠移動事件。

　　(ev = ev || window.event) 這樣讓 ev 在所有瀏覽器下穫取了 event 事件，在 Firefox 下 "||window.event" 將不起作用，因為 ev 已經有了賦值。在 MSIE 下 ev 是空的，所以 ev 將設定為 window.event。

　　因為我們在這篇文章中需要多次穫取滑鼠坐標，所以我們設計了 mouseCoords 這個函數，它隻包含了一個參數，就是 the event。

　　我們需要運行在 MSIE 與 Firefox 為首的其他瀏覽器下。Firefox 以 event.pageX 和 event.pageY 來代表滑鼠相應於文檔左上角的位置。如果你有一個 500*500 的窗口，而且你的滑鼠在正中間，那麼 paegX 和 pageY 將是 250，當你將頁面往下卷動 500px，那麼 pageY 將是 750。此時 pageX 不變，還是 250。

　　MSIE 和這個相反，MSIE 將 event.clientX 與 event.clientY 來代表滑鼠與 ie 窗口的位置，並不是文檔。當我們有一個 500*500 的窗口，滑鼠在正中間，那麼 clientX 與 clientY也 是 250，如果你垂直卷動窗口到任何位置，clientY 仍然是 250，因為相對 ie 窗口並沒有變化。想得到正確的結果，我們必須加入 scrollLeft 與 scrollTop 這兩個相對於文檔滑鼠位置的屬性。最後，由於 MSIE 並沒有 0,0 的文檔起始位置，因為通常會設定 2px 的邊框在周圍，邊框的寬度包含在 document.body.clientLeft 與 clientTop 這兩個屬性中，我們再加入這些到滑鼠的位置中。

　　很幸運，這樣 mouseCoords 函數就完成了，我們不再為坐標的事操心了。

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。