Flyingis

Talking and thinking freely !
Flying in the world of GIS !
随笔 - 156, 文章 - 16, 评论 - 589, 引用 - 0
数据加载中……

[翻译] 如何在 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非空的时候,我们需要进行拖动操作。

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

    续文:[翻译] 如何在 JavaScript 中实现拖放(中)   [翻译] 如何在 JavaScript 中实现拖放(下)

posted on 2006-10-11 16:20 Flyingis 阅读(7400) 评论(2)  编辑  收藏 所属分类: Web 客户端技术

评论

# re: [翻译] 如何在 JavaScript 中实现拖放(上)  回复  更多评论   

看到广告可真够烦的,不过搂主还是辛苦了,等待第三篇
2006-10-13 18:16 | stoneshao

# re: [翻译] 如何在 JavaScript 中实现拖放(上)[未登录]  回复  更多评论   

0
2009-02-17 17:08 | Nicole

只有注册用户登录后才能发表评论。


网站导航: