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

    译者:Flyingis

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

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

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

    捕获鼠标的移动

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

None.gif document.onmousemove  =  mouseMove;
ExpandedBlockStart.gifContractedBlock.gif
function  mouseMove(ev)  dot.gif {
InBlock.gif  ev 
= ev || window.event;
InBlock.gif  
var mousePos = mouseCoords(ev);
ExpandedBlockEnd.gif}

ExpandedBlockStart.gifContractedBlock.gif
function  mouseCoords(ev)  dot.gif {
ExpandedSubBlockStart.gifContractedSubBlock.gif  
if(ev.pageX || ev.pageY) dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
return dot.gif{x:ev.pageX, y:ev.pageY};
ExpandedSubBlockEnd.gif  }

ExpandedSubBlockStart.gifContractedSubBlock.gif  
return dot.gif{
InBlock.gif    x:ev.clientX 
+ document.body.scrollLeft - document.body.clientLeft,
InBlock.gif    y:ev.clientY 
+ document.body.scrollTop - document.body.clientTop
ExpandedSubBlockEnd.gif  }
;
ExpandedBlockEnd.gif}

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

None.gif document.onmouseup  =  mouseUp;
None.gif
var  dragObject  =   null ;
ExpandedBlockStart.gifContractedBlock.gif
function  makeClickable(object)  dot.gif {
ExpandedSubBlockStart.gifContractedSubBlock.gif  object.onmousedown 
= function() dot.gif{
InBlock.gif  dragObject 
= this;
ExpandedSubBlockEnd.gif  }

ExpandedBlockEnd.gif}

ExpandedBlockStart.gifContractedBlock.gif
function  mouseUp(ev)  dot.gif {
InBlock.gif  dragObject 
= null;
ExpandedBlockEnd.gif}

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

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

    续文: [翻译] 如何在 JavaScript 中实现拖放(中)   [翻译] 如何在 JavaScript 中实现拖放(下)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值