技术资料首页 >> 程序员专区 >> JavaScript专栏 >> [翻译] 如何在 JavaScript 中实现拖放

[翻译] 如何在 JavaScript 中实现拖放 (1)

2007-07-19 16:48:41作者：flyingis 来源：flyingis 浏览次数：0 文字大小：【大】【中】【小】
简介：终于完成了全文的翻译，由于时间比较参促，文章没有过多的校正与润色，阅读过程中难免会有些许生硬或不准确的感觉，请大家见量并指出，方便他人阅读。 原文作者将拖放功能的实现分步讲解，其核心的地方在于移动和放置元素时，鼠标 ...
关键字：拖放

终于完成了全文的翻译，由于时间比较参促，文章没有过多的校正与润色，阅读过程中难免会有些许生硬或不准确的感觉，请大家见量并指出，方便他人阅读。

原文作者将拖放功能的实现分步讲解，其核心的地方在于移动和放置元素时，鼠标、移动元素、目标元素关系的处理，只要这个问题处理好了，代码就很容易理解，译文仅供辅助参考之用，demo可以参考原文链接。

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

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

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

捕获鼠标的移动

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

代码
  1. document.onmousemove = mouseMove;   
  2. function mouseMove(ev) {   
  3.   ev = ev || window.event;   
  4.   var mousePos = mouseCoords(ev);   
  5. }   
  6. function mouseCoords(ev) {   
  7.   if(ev.pageX || ev.pageY) {   
  8.     return {x:ev.pageX, y:ev.pageY};   
  9.   }   
  10.   return {   
  11.     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,   
  12.     y:ev.clientY + document.body.scrollTop - document.body.clientTop   
  13.   };   
  14. }  

 

首先我们需要解释一下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指向一个函数，那么这个函数将会因为鼠标点击任何元素而执行：文本、图像、表格，等等。我们只想页面中特定的元素具有被拖放的功能，因此，我们可以通过如下方法实现：

代码
  1. document.onmouseup = mouseUp;   
  2. var dragObject = null;   
  3. function makeClickable(object) {   
  4.   object.onmousedown = function() {   
  5.   dragObject = this;   
  6.   }   
  7. }   
  8. function mouseUp(ev) {   
  9.   dragObject = null;   
  10. }  

 

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

原文链接：http://www.webreference.com/programming/javascript/mk/column2/index.html
译文链接：http://www.blogjava.net/flyingis/archive/2006/10/11/74591.html

[1] [2] [3]
本文引用地址： http://www.themore.net/program/javascript/200707/article_12491.html

相关文章