本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题，其他元件的拖动也是同样的道理，这里以使用较多的层元件为例进行解释。
层的拖动涉及了以下三个鼠标事件：
onmousedown：点下鼠标
onmousemove：移动鼠标
onmouseup：松开鼠标
拖动基本过程：
点下鼠标时，开始拖动，记下鼠标指针位置与被拖动元件的相对位置x；
鼠标移动时，根据鼠标指针的位置和相对元件位置x计算出元件的位置，并设置元件位置；
松开鼠标时，要销毁鼠标移动的事件处理程序，停止拖动。
下面来看一个层拖动的具体例子：
Drag Demo 1
drag me
代码注释：
1. 该实例使用drag()函数对某个元件添加事件处理程序以实现元件的拖动，传入的参数o为要被拖动的元件对象。
2. 必须将要拖动的元件的位置设置为绝对定位(absolute)，并设置左边距和顶边距。
3. layerX和layerY是Netscape的事件属性，表示事件相对于包容图层的X坐标和Y坐标，在IE中它们则是offsetX和offsetY。
4. setCapture()和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数，在设置onmousemove和 onmouseup事件处理程序前必须使用，IE的setCapture可以针对某个特定的元件设置事件捕获，而Netscape中只能对整个文档设置，这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。
5. clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标。
有时要对拖动的范围做一个限定，比如窗口的滑动块，这时，只要稍稍修改onmousemove事件处理程序即可，在对元件定位前判断其位置。
修改后代码如下：
Drag Demo 2
drag me
增加的一个传入参数r指定了元件的移动范围，它是一个数组，包含的四个元素分别代表元件的左、右、上、下范围。 接下来看一个在FireFox下会出现的问题，代码如下：
Drag Demo 3
http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" />
要拖动的层中包含的是一张图片而不再是文字，这样在IE中仍可以正常拖动，而在FireFox中会发生异常，点下鼠标、拉动、并松开后，层并没有停止拖动，而是跟随着鼠标。
仔细地分析了一下原因，就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件，当点下鼠标并拉动时时，FireFox会认为要拖动的对象是层里的图片，该操作无效。
要解决这个问题，只要把图片上的鼠标点下事件设置为无效，在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下：
Drag Demo 3
http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" />
阅读(1096) | 评论(1) | 转发(0) |
给主人留下些什么吧！~~
chinaunix网友2010-11-09 16:30:00
很好的, 收藏了
推荐一个博客，提供很多免费软件编程电子书下载：
http://free-ebooks.appspot.com
