有許多理由讓你在頁面中加入拖放的功能，其中最簡單的理由是重新組織數(shù)據(jù)。舉個例子，你可能希望用戶能夠重組一系列的頁面元素，通過放置一個input或 select組件在各個元素的旁邊來代表它們的順序是一種解決方案，使該組元素可以被拖放是一種替代方案?；蛘咭苍S你想在網(wǎng)站上擁有一個可以被用戶移動的導(dǎo)航窗口。這些都是使用拖放功能的簡單理由，因為你能夠?qū)崿F(xiàn)！
在你的網(wǎng)頁上實現(xiàn)拖放的效果并不是很復(fù)雜。首先，我們知道鼠標(biāo)的位置，然后我們需要了解用戶什么時候點擊一個元素，以至于我們知道要準(zhǔn)備開始拖動它，最后我們要移動這個元素。

捕獲鼠標(biāo)的移動
第一步，我們需要獲取鼠標(biāo)的坐標(biāo)，通過一個函數(shù)并賦給document.onmousemove可以實現(xiàn)這一功能：

代碼

首先我們需要解釋一下event對象。不論你什么時候移動、點擊鼠標(biāo)，或按鍵，等等，一個事件都會發(fā)生。在IE中，這個事件是全局的，它被存儲在 window.event中，對于Firefox，及其他的瀏覽器來說，這個事件將被傳遞到任何指向這個頁面動作的函數(shù)中。因此，我們使 document.onmousemove指向鼠標(biāo)移動的函數(shù)，鼠標(biāo)移動的函數(shù)獲得事件對象。
上述代碼中，ev在所有瀏覽器環(huán)境中都包含了event對象。在Firefox里，"||window.event"將被忽略，因為它已經(jīng)包含事件。在IE中，ev的值為空，以至于需要將它的值設(shè)置為window.event。
本文中我們需要多次捕獲到鼠標(biāo)的坐標(biāo)，因此我們寫了一個mouseCoords方法，它有一個參數(shù)：event。
我們要再次討論IE和其他瀏覽器之間的差異。Firefox和其他的瀏覽器使用event.pageX和event.pageY來表示鼠標(biāo)相對于 document文檔的位置。如果你有一個500*500的窗口，并且鼠標(biāo)位于窗口中間，那么pageX和pageY的值將都是250。如果你將窗口向下滾動500象素，pageY的值為750。
如此相反的是，微軟的IE使用event.clientX和event.clientY來表示鼠標(biāo)相對于window窗口的位置，而不是當(dāng)前 document文檔。在相同的例子中，如果將鼠標(biāo)放置于500*500窗口的中間，clientX和clientY值將均為250。如果向下滾動頁面， clientY將仍為250，因為它是相對于window窗口來測量，而不是當(dāng)前的document文檔。因此，在鼠標(biāo)位置中，我們應(yīng)該引入 document文檔body區(qū)域的scrollLeft和scrollTop屬性。最后，IE中document文檔實際并不在(0,0)的位置，在它周圍有一個?。ㄍǔＳ?px）邊框，document.body.clientLeft和document.body.clientTop包含了這個邊框的寬度，從而還需要在鼠標(biāo)位置中引入它們。
幸運的是，現(xiàn)在我們擁有了mouseCoords函數(shù)，不用再為獲取鼠標(biāo)位置擔(dān)心了。

捕獲鼠標(biāo)的點擊
下一步，我們必須知道鼠標(biāo)何時點擊及何時釋放。如果我們跳過這一步，只要你的鼠標(biāo)移動經(jīng)過這些元素時，都將產(chǎn)生拖動這些元素的效果，這是令人討厭并違反人的直覺的。
在這里，有兩個函數(shù)可以幫助我們：onmousedown和onmouseup。先前我們已將document.onmousemove指向一個函數(shù)，因此從邏輯上似乎應(yīng)該使document.onmousedown和document.onmouseup都指向函數(shù)。如果我們讓 document.onmousedown指向一個函數(shù)，那么這個函數(shù)將會因為鼠標(biāo)點擊任何元素而執(zhí)行：文本、圖像、表格，等等。我們只想頁面中特定的元素具有被拖放的功能，因此，我們可以通過如下方法實現(xiàn)：

代碼

我們現(xiàn)在有了一個變量dragObject，包含了你點擊的任何元素。當(dāng)你釋放鼠標(biāo)的時候，dragObject被設(shè)置為空，從而在dragObject非空的時候，我們需要進行拖動操作。

移動元素
我們現(xiàn)在已經(jīng)知道如何捕獲鼠標(biāo)移動和點擊。接下來需要做的就是移動任何我們想拖動的元素。首先，將一個元素準(zhǔn)確移動到頁面上我們想要的位置，該元素樣式表的position值必須為absolute，這意味著你可以設(shè)置它的style.top或style.left，測量值相對于頁面的左上角，因為我們所有的鼠標(biāo)移動都是相對于頁面左上角的，通常都是這樣。
一旦我們設(shè)置了item.style.position='absolute'，接下來就需要改變該元素top和left的位置，使它移動！

代碼

你會注意到這些代碼是以我們前面的例子為基礎(chǔ)的（參考上篇文章），將它們放置在一起，你將能夠隨意的去移動元素。
當(dāng)我們點擊一個元素時，存儲了另外的一個變量，mouseOffset。mouseOffset簡單的包含了我們點擊元素的位置信息。如果我們有一張 20*20px的圖像，然后點擊圖像的中間，mouseOffset應(yīng)該是{x:10, y:10}。如果我們點擊圖像的左上角，mouseOffset應(yīng)為{x:0, y:0}。我們在鼠標(biāo)移動后的位置信息中用到它。如果我們沒有存儲這個值，不論你點擊元素的哪一個位置，元素相對于鼠標(biāo)的位置都將會是相同的。
mouseOffset函數(shù)用到了另外一個函數(shù)getPosition。getPosition目的是返回元素相對于documemt文檔的坐標(biāo)位置。如果我們簡單的去讀取item.offsetLeft或item.style.left，得到的將是元素相對于它父元素的位置，而不是document文檔的。在我們的腳本中，所有的元素都是相對于document文檔的，因此需要這樣做。
要完成獲取元素相對于document文檔位置的工作，getPosition從它自身的父級開始，循環(huán)獲取它的left和top的值并累加，這樣我們就得到了我們想要的元素距文檔頂部和左側(cè)的累計值。
當(dāng)我們獲取了這條信息并移動鼠標(biāo)的時候，mouseMove開始運行。首先我們需要保證item.style.position值為absolute，接著，我們將元素移動到任何一個地方，鼠標(biāo)位置都會減去我們之前記錄的鼠標(biāo)相對于元素的偏移量。當(dāng)鼠標(biāo)釋放時，dragObject將被設(shè)置為null，并且mouseMove函數(shù)不再做任何事情。

放置元素
我們前面的例子已經(jīng)處理了這個問題，僅僅是拖動一個元素，然后將它放下。然后，在我們放下元素的時候通常還有其他的目的，我們以拖動元素到垃圾回收站為例，或我們可能想讓該元素和頁面中某個特定的區(qū)域?qū)R。
不幸的是我們在這里進入了一個相對主要的問題。因為我們正在移動的元素總是直接處于我們的鼠標(biāo)下，而不可能去引發(fā)mouseover、 mousedown、mouseup或鼠標(biāo)對頁面中其他元素的操作。如果你移動一個元素到垃圾回收站，你的鼠標(biāo)會一直在移動元素的上方，而不是垃圾回收站。
那么我們該如何處理這個問題呢？這里有幾種解決方案。在前面所提到的mouseOffset的目的是保證元素總是在鼠標(biāo)下方正確的位置，如果你忽視了這點，然后總是使得元素在鼠標(biāo)的右下方，你的鼠標(biāo)將不會被你正在拖動的元素所隱藏，我們也不會碰到問題。但事實上往往不會這樣，為了美觀我們通常要保持元素在鼠標(biāo)的下方。
另外一種選擇是不移動你正在拖動的元素，你可以改變鼠標(biāo)樣式，來告訴使用者你正在拖動一個元素，直到你將它放置到某個地方。這解決了我們的問題，但是帶來了和前面一種方案面臨的同樣問題：美觀。
我們最后的一種解決方案既不影響你正在移動的元素，也不影響移動終點位置上的元素（例如垃圾回收站）。不幸的是，這比前面兩種解決方案的難度更大。我們將要做的是獲得一組我們要放置的目標(biāo)，當(dāng)鼠標(biāo)釋放時，我們手工檢查當(dāng)前鼠標(biāo)相對于每個目標(biāo)的位置，看鼠標(biāo)是否釋放在這個目標(biāo)中某一個目標(biāo)的位置上，如果是的，我們就知道我們已經(jīng)將元素放置在我們的目標(biāo)上了。

代碼

這個例子中當(dāng)鼠標(biāo)釋放時，我們循環(huán)每個可能放置元素的目標(biāo)，如果鼠標(biāo)指針在目標(biāo)上，我們則擁有了一個放置元素的事件，通過鼠標(biāo)橫坐標(biāo)大于目標(biāo)元素左側(cè)橫坐標(biāo)（mousePos.x>targPos.x），小于目標(biāo)元素右側(cè)橫坐標(biāo)（mousePos.x<(targPos.x+ targWidth)）來判定，對于Y坐標(biāo)我們做同樣的判斷。如果所有的這些值都返回true，那么我們的鼠標(biāo)就是在目標(biāo)元素的范圍內(nèi)。

整合所有的功能
最后我們使用所有代碼片斷，來創(chuàng)建一個完整的拖放函數(shù)腳本。我們所要做的第一件事情是DOM操作，如果你對此并不十分熟悉，可以閱讀《JavaScript Primer on DOM Manipulation》。
接下來的代碼創(chuàng)建容器和容器組，使得在這些容器中可以拖動每個元素，這在本文第二個demo的基礎(chǔ)上來完成。這段代碼能夠用來重新規(guī)劃元素的順序，將導(dǎo)航窗口放在頁面的左側(cè)或右側(cè)，或再加入你所能想到的其他的功能。
我們將使用偽代碼來一步步進行講解，將真實的代碼通過注釋的方式留給讀者查看。
1.當(dāng)文檔第一次被加載時，我們創(chuàng)建一個名為dragHelper的DIV標(biāo)簽，當(dāng)我們開始移動一個元素的時候，dragHelper將成為一個隱藏元素，可以四處移動。真實的元素并不會被拖動，僅僅使用insertBefore和appendChild來移動。我們在開始的時候隱藏dragHelper。
2.我們創(chuàng)建mouseDown和mouseUp函數(shù)。起初，所有的這些函數(shù)都假設(shè)記錄了鼠標(biāo)按鈕的狀態(tài)，以至于iMouseDown變量在鼠標(biāo)按下的時候為true，沒有按下的時候為false。
3.我們創(chuàng)建一個全局變量DragDrops，以及一個函數(shù)CreateDragContainer。DragDrops包含一組相互關(guān)聯(lián)的容器。傳入CreateDragContainer的任何變量（代表容器）被組織成一個新的集合，使元素能夠在這些容器間自由移動。通過setAttribute，CreateDragContainer函數(shù)同樣將各容器中的元素綁定在一起。
4.現(xiàn)在我們的代碼知道每個元素所在的集合，現(xiàn)在來看mouseMove函數(shù)。mouseMove函數(shù)首先設(shè)置了一個變量target，表示鼠標(biāo)下面的目標(biāo)元素，如果這個元素在集合（用getAttribute判斷）中就繼續(xù)下面操作：
4.1.首先，在必要的時候，我們運行一個簡單的腳本來改變目標(biāo)元素的class屬性，這樣就創(chuàng)造了一個翻動的效果。
4.2.然后我們檢查鼠標(biāo)是否點擊（因為我們的代碼已經(jīng)運行到這里），如果事件發(fā)生：
4.2.1.設(shè)置變量curTarget為當(dāng)前元素。
4.2.2.記錄元素當(dāng)前在文檔中的位置，以便在需要的時候可以將它的值取回。
4.2.3.將當(dāng)前元素克隆到dragHelper，使得我們能夠移動元素的隱藏備份。
4.2.4.因為在dragHelper中我們完全擁有了拖動元素的一個備份，這個元素會始終在鼠標(biāo)下，我們必須移除dragObj屬性，讓代碼知道dragObj已不在集合中。
4.2.5.我們快速記錄集合中每個元素當(dāng)前的位置、寬度和高度。當(dāng)元素第一次開始被拖動時，我們僅需做一次這種工作，否則每當(dāng)鼠標(biāo)移動的時候我們都必須做一次，甚至一秒內(nèi)幾百次。
4.3.如果鼠標(biāo)沒有點擊，要么我們和之前擁有同樣的目標(biāo)元素，要么沒有目標(biāo)元素，不論哪種情況我們都不會做任何事情。
5.現(xiàn)在我們檢查curTarget變量。curTarget應(yīng)該僅包含一個被拖動的對象，因此如果它存在，表示我們正在拖動一個元素：
5.1.移動隱藏DIV到鼠標(biāo)，這個元素和文章前面所創(chuàng)建的元素一樣能夠被拖動。
5.2.然后我們檢查鼠標(biāo)是否存在于當(dāng)前集合中每個容器中。
5.2.1.如果鼠標(biāo)在某個容器中，我們檢查容器中的每個元素，查看我們正拖動的元素屬于哪個位置。
5.2.2.然后我們將所拖動的元素放置在容器中另一個元素的前面，或容器的最后位置。
5.2.3.最后我們確定元素可見。
6.剩下的事情就是捕獲mouseUp事件：
6.1.首先需要隱藏dragHelper：它不再被需要，因為我們沒有拖動任何東西。
6.2.如果拖動的元素是可見的，它已經(jīng)存在于任何它所屬的容器中，所有工作已完成。
6.3.如果拖動的元素不可見，我們將它放回它原來所在的地方。