譯者：Flyingis

    JavaScript擅長于修改頁面中的DOM元素，但是我們使用JavaScript通常只是實現(xiàn)一些簡單功能，例如實現(xiàn)圖片的翻轉(zhuǎn)，網(wǎng)頁中的標(biāo)簽頁，等等。這篇文章將向你展示如何在頁面中，對創(chuàng)建的元素實現(xiàn)拖放。

    有許多理由讓你在頁面中加入拖放的功能，其中最簡單的理由是重新組織數(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)這一功能：

document.onmousemove = mouseMove;
function mouseMove(ev) {
  ev = ev || window.event;
  var mousePos = mouseCoords(ev);
}
function mouseCoords(ev) {
  if(ev.pageX || ev.pageY) {
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

    首先我們需要解釋一下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)：

document.onmouseup = mouseUp;
var dragObject = null;
function makeClickable(object) {
  object.onmousedown = function() {
  dragObject = this;
  }
}
function mouseUp(ev) {
  dragObject = null;
}

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

    原文鏈接：http://www.webreference.com/programming/javascript/mk/column2/index.html