IE和FireFox中层的拖动详解。
2007-12-04 10:02
411 查看
本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题,其他元件的拖动也是同样的道理,这里以使用较多的层元件为例进行解释。
层的拖动涉及了以下三个鼠标事件:
onmousedown:点下鼠标
onmousemove:移动鼠标
onmouseup:松开鼠标
拖动基本过程:
点下鼠标时,开始拖动,记下鼠标指针位置与被拖动元件的相对位置x;
鼠标移动时,根据鼠标指针的位置和相对元件位置x计算出元件的位置,并设置元件位置;
松开鼠标时,要销毁鼠标移动的事件处理程序,停止拖动。
下面来看一个层拖动的具体例子:
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 me
增加的一个传入参数r指定了元件的移动范围,它是一个数组,包含的四个元素分别代表元件的左、右、上、下范围。
接下来看一个在FireFox下会出现的问题,代码如下:
要拖动的层中包含的是一张图片而不再是文字,这样在IE中仍可以正常拖动,而在FireFox中会发生异常,点下鼠标、拉动、并松开后,层并没有停止拖动,而是跟随着鼠标。
仔细地分析了一下原因,就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件,当点下鼠标并拉动时时,FireFox会认为要拖动的对象是层里的图片,该操作无效。
要解决这个问题,只要把图片上的鼠标点下事件设置为无效,在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下:
层的拖动涉及了以下三个鼠标事件:
onmousedown:点下鼠标
onmousemove:移动鼠标
onmouseup:松开鼠标
拖动基本过程:
点下鼠标时,开始拖动,记下鼠标指针位置与被拖动元件的相对位置x;
鼠标移动时,根据鼠标指针的位置和相对元件位置x计算出元件的位置,并设置元件位置;
松开鼠标时,要销毁鼠标移动的事件处理程序,停止拖动。
下面来看一个层拖动的具体例子:
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 me
增加的一个传入参数r指定了元件的移动范围,它是一个数组,包含的四个元素分别代表元件的左、右、上、下范围。
接下来看一个在FireFox下会出现的问题,代码如下:
要拖动的层中包含的是一张图片而不再是文字,这样在IE中仍可以正常拖动,而在FireFox中会发生异常,点下鼠标、拉动、并松开后,层并没有停止拖动,而是跟随着鼠标。
仔细地分析了一下原因,就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件,当点下鼠标并拉动时时,FireFox会认为要拖动的对象是层里的图片,该操作无效。
要解决这个问题,只要把图片上的鼠标点下事件设置为无效,在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下:
相关文章推荐
- IE和FireFox中层的拖动详解
- IE和FireFox中层的拖动详解
- 【松鼠搞拖拽】[转帖]IE和FireFox中层的拖动详解
- 往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)
- javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome(原创,想要尽管拿去用。技术支持:QQ3084532)
- JavaScript代码实例:拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )
- 鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox
- 鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox
- 兼容Firefox和IE的拖动div块的实现
- 背景变暗可拖动提示窗口,兼容IE、Firefox、Opera
- 代码短小的js div层拖动实现代码[兼容IE与Firefox]
- 代码短小的js div层拖动实现代码[兼容IE与Firefox]
- table-layout:fixed 属性的解说,IE、Firefox效果对比详解
- 一个背景变暗的div可拖动提示窗口,兼容IE、Firefox、Opera
- CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera
- 完全兼容ie与firefox的拖动层
- 背景变暗的div可拖动提示窗口,兼容IE、Firefox、Opera
- css的pointer鼠标类型详解(支持IE,firefox,chrome)
- 该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.
- ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条