如何在 JavaScript 中实现拖放

 译者：Flyingis

    JavaScript擅长于修改页面中的DOM元素，但是我们使用JavaScript通常只是实现一些简单功能，例如实现图片的翻转，网页中的标签页，等等。这篇文章将向你展示如何在页面中，对创建的元素实现拖放。

    有许多理由让你在页面中加入拖放的功能，其中最简单的理由是重新组织数据。举个例子，你可能希望用户能够重组一系列的页面元素，通过放置一个input或select组件在各个元素的旁边来代表它们的顺序是一种解决方案，使该组元素可以被拖放是一种替代方案。或者也许你想在网站上拥有一个可以被用户移动的导航窗口。这些都是使用拖放功能的简单理由，因为你能够实现！

    在你的网页上实现拖放的效果并不是很复杂。首先，我们知道鼠标的位置，然后我们需要了解用户什么时候点击一个元素，以至于我们知道要准备开始拖动它，最后我们要移动这个元素。

    捕获鼠标的移动

    第一步，我们需要获取鼠标的坐标，通过一个函数并赋给document.onmousemove可以实现这一功能：

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对象。不论你什么时候移动、点击鼠标，或按键，等等，一个事件都会发生。在IE中，这个事件是全局的，它被存储在window.event中，对于Firefox，及其他的浏览器来说，这个事件将被传递到任何指向这个页面动作的函数中。因此，我们使document.onmousemove指向鼠标移动的函数，鼠标移动的函数获得事件对象。

    上述代码中，ev在所有浏览器环境中都包含了event对象。在Firefox里，"||window.event"将被忽略，因为它已经包含事件。在IE中，ev的值为空，以至于需要将它的值设置为window.event。

    本文中我们需要多次捕获到鼠标的坐标，因此我们写了一个mouseCoords方法，它有一个参数：event。

    我们要再次讨论IE和其他浏览器之间的差异。Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于document文档的位置。如果你有一个500*500的窗口，并且鼠标位于窗口中间，那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素，pageY的值为750。

    如此相反的是，微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置，而不是当前document文档。在相同的例子中，如果将鼠标放置于500*500窗口的中间，clientX和clientY值将均为250。如果向下滚动页面，clientY将仍为250，因为它是相对于window窗口来测量，而不是当前的document文档。因此，在鼠标位置中，我们应该引入document文档body区域的scrollLeft和scrollTop属性。最后，IE中document文档实际并不在(0,0)的位置，在它周围有一个小（通常有2px）边框，document.body.clientLeft和document.body.clientTop包含了这个边框的宽度，从而还需要在鼠标位置中引入它们。

    幸运的是，现在我们拥有了mouseCoords函数，不用再为获取鼠标位置担心了。

    捕获鼠标的点击
 
    下一步，我们必须知道鼠标何时点击及何时释放。如果我们跳过这一步，只要你的鼠标移动经过这些元素时，都将产生拖动这些元素的效果，这是令人讨厌并违反人的直觉的。

    在这里，有两个函数可以帮助我们：onmousedown和onmouseup。先前我们已将document.onmousemove指向一个函数，因此从逻辑上似乎应该使document.onmousedown和document.onmouseup都指向函数。如果我们让document.onmousedown指向一个函数，那么这个函数将会因为鼠标点击任何元素而执行：文本、图像、表格，等等。我们只想页面中特定的元素具有被拖放的功能，因此，我们可以通过如下方法实现：

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

    我们现在有了一个变量dragObject，包含了你点击的任何元素。当你释放鼠标的时候，dragObject被设置为空，从而在dragObject非空的时候，我们需要进行拖动操作。