【松鼠搞拖拽】[转帖]IE和FireFox中层的拖动详解

最新推荐文章于 2024-06-11 21:59:41 发布
最新推荐文章于 2024-06-11 21:59:41 发布
阅读量609 收藏
点赞数
文章标签： firefox ie function null border 浏览器
原文地址：http://blog.iyi.cn/hily/archives/2005/10/iefirefox.html

本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题，其他元件的拖动也是同样的道理，这里以使用较多的层元件为例进行解释。

层的拖动涉及了以下三个鼠标事件：
onmousedown：点下鼠标
onmousemove：移动鼠标
onmouseup：松开鼠标

拖动基本过程：
点下鼠标时，开始拖动，记下鼠标指针位置与被拖动元件的相对位置x；
鼠标移动时，根据鼠标指针的位置和相对元件位置x计算出元件的位置，并设置元件位置；
松开鼠标时，要销毁鼠标移动的事件处理程序，停止拖动。

下面来看一个层拖动的具体例子：

<pre>

<html>
<head>
<title> Drag Demo 1 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.οnlοad=function(){
drag(document.getElementById('drag'));
};

function drag(o){
o.οnmοusedοwn=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.οnmοusemοve=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx;
o.style.top=ty;
};

d.οnmοuseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.releaseEvents)
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.οnmοusemοve=null;
d.οnmοuseup=null;
};
};
}
//-->
</script>
</head>

<body>
<div id="drag">drag me<div>
</body>
</html>

</pre>

代码注释：
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事件处理程序即可，在对元件定位前判断其位置。
修改后代码如下：

<html>
<head>
<title> Drag Demo 2 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.οnlοad=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};

function drag(o,r){
o.οnmοusedοwn=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.οnmοusemοve=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};

d.οnmοuseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.releaseEvents)
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.οnmοusemοve=null;
d.οnmοuseup=null;
};
};
}
//-->
</script>
</head>

<body>
<div id="drag">drag me<div>
</body>
</html>
增加的一个传入参数r指定了元件的移动范围，它是一个数组，包含的四个元素分别代表元件的左、右、上、下范围。 接下来看一个在FireFox下会出现的问题，代码如下：

<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.οnlοad=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};

function drag(o,r){
o.οnmοusedοwn=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.οnmοusemοve=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};

d.οnmοuseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.releaseEvents)
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.οnmοusemοve=null;
d.οnmοuseup=null;
};
};
}
//-->
</script>
</head>

<body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>
要拖动的层中包含的是一张图片而不再是文字，这样在IE中仍可以正常拖动，而在FireFox中会发生异常，点下鼠标、拉动、并松开后，层并没有停止拖动，而是跟随着鼠标。
仔细地分析了一下原因，就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件，当点下鼠标并拉动时时，FireFox会认为要拖动的对象是层里的图片，该操作无效。
要解决这个问题，只要把图片上的鼠标点下事件设置为无效，在drag函数内加上 o.firstChild.οnmοusedοwn=function(){return false;}; 即可。
最终代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
    width:100px;
    height:20px;
    background-color:#eee;
    border:1px solid #333;
    position:absolute;
    top:30px;
    left:200px;
    text-align:center;
    cursor:default;
    }
//-->
</style>
<script type="text/javascript">
<!--
window.οnlοad=function(){
    drag(document.getElementById('drag'),[200,400,30,30]);
};

function drag(o,r){
    var lxImg = o.getElementsByTagName("img");
    for(var i = 0; i < lxImg.length; i++) {
        lxImg[i].οnmοusedοwn=function(){return false;};
    }
    o.οnmοusedοwn=function(a){
        var d=document;if(!a)a=window.event;
        var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
        if(o.setCapture)
            o.setCapture();
        else if(window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

        d.οnmοusemοve=function(a){
            if(!a)a=window.event;
            if(!a.pageX)a.pageX=a.clientX;
            if(!a.pageY)a.pageY=a.clientY;
            var tx=a.pageX-x,ty=a.pageY-y;
            o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
            o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
        };

        d.οnmοuseup=function(){
            if(o.releaseCapture)
                o.releaseCapture();
            else if(window.releaseEvents)
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            d.οnmοusemοve=null;
            d.οnmοuseup=null;
        };
    };
}
//-->
</script>
</head>

<body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>

jingliu_squirrel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搞怪松鼠图标下载
12-25
……………………该文档为搞怪松鼠图标下载，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
YYC松鼠聚合直播系统v3.0.2完整版+含数据库
10-28
YYC松鼠聚合直播系统v3.0.2完整版+含数据库松鼠聚合直播系统是一套团队自主研发、源码开源，可自由二次开发的直播系统。
IE和FireFox中层的拖动详解
RunUpwind的专栏
06-20 1327
好东西当然要共分享,源:http://blog.iyi.cn/hily/archives/2005/10/iefirefox.html 本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题，其他元件的拖动也是同样的道理，这里以使用较多的层元件为例进行解释。 层的拖动涉及了以下三个鼠标事件：onmousedown：点下鼠标onmousemove：移动鼠标onmo
完全兼容ie与firefox的拖动层
管子（zero）的杂乱空间
10-09 1130
  zhous html                                                 一共三个层,下面还有一个,把他拖上来 Magnolia Mag.nolia Mozilla Red 小 纸 条一共三个层,下面还有一个,把他拖上来有了拖动层,做局部拖动很简单 小 纸 条一共三个层,下面还有一个,把他拖上来顺便练习下颜色搭配 Shiny silver
FireFox禁止鼠标拖拽图片
高级项目经理、专注于技术架构、分享项目管理及职场心得
07-29 1418
document.ondragstart=function() {return false;}
Vue阻止火狐浏览器拖拽上传文件弹出新窗口
qq_43637218的博客
05-13 1379
Vue阻止火狐浏览器拖拽弹出新窗口 问题描述 在使用vue开发的时候，项目中使用的是elementUI的el-upload组件拖拽上传文件。测试的时候发现火狐浏览器下会弹出新窗口，谷歌正常。 问题解决 拖拽弹出新窗口这是火狐浏览器的特性，在99.0.1和100版本都发现了这个问题，尝试查找解决办法。 在html页面包含el-upload的标签外增加drop事件。 增加reportDrop方法 // 阻止火狐浏览器拖拽上传文件弹出新窗口 reportDrop (event) {
诚之和:三只松鼠走到十字路口
weixin_45378258的博客
10-19 314
2012年6月19日，初代“淘品牌”三只松鼠上线，喊出了第一声“主人”。那年“双11”，其就夺得了天猫坚果零食品类的销售冠军，当日销售额766万元。 踩上电商风口的那个男人，叫章燎源，安徽人。在他的带领下，三只松鼠一路狂奔，成为了行业龙头。直到2017年，电商流量不再等于业绩的高增长，于是，“网生”品牌被迫谋变。 以“网红”姿态出道的三只松鼠，也开始主动拥抱线下门店。 从2019年开始，三只松鼠加速布局门店。这一年，章燎源说：三只松鼠五年内将开设10000家线下门店。可是，说提速就提速，哪有那么顺..
【《松鼠》阅读题与答案】松鼠和狼阅读答案.docx
11-13
"松鼠阅读题与答案" 松鼠是一种美丽的小动物，乖巧，驯良，很讨人喜爱。它们面容清秀，眼睛闪闪发光，身体强健，四肢轻快，特别灵敏，特别机警。松鼠的身体结构非常适合树栖生活，它们可以轻松地在树枝间跳跃，钻入...
三只松鼠公司案例分析.docx
05-29
三只松鼠公司案例分析
3松鼠和松果——小学生学习课件
11-23
3松鼠和松果——小学生学习课件
js div拖拽实现兼容ie/firefox js之鼠标位置深入解析
无意摘花
09-03 6955
在前端web开发中，不可避免地会应用到对某个对象的拖拽操作，尤其经常是一个div层。对页面对象的位置移动操作，难点就在如何准确的获取鼠标位置，本文就对鼠标位置做一些分析对比，最后完成一个对div的拖拽操作。 js中获取鼠标位置的各种参数 名称 解释 clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 clientY
Nginx+Tomcat负载均衡、动静分离原理
F12138X的博客
06-11 851
十年磨一剑，霜刃未曾试
linux聊天系统，采用微信小程序与PC端双端开发。
最新发布
06-15
后台采用apache服务器下的cgi处理c语言做微信小程序后台逻辑的脚本映射。PC端的服务器和客户端都是基于c语言写的。采用mysql数据库进行用户数据和聊天记录的存储。.zip C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中，变量用于存储数据，数据类型用于定义变量的类型和范围。C语言支持多种数据类型，包括基本数据类型（如int、float、char等）和复合数据类型（如结构体、联合等）。 2. 运算符 C语言中常用的运算符包括算术运算符（如+、、、/等）、关系运算符（如==、!=、、=、<、<=等）、逻辑运算符（如&&、||、！等）。此外，还有位运算符（如&、|、^等）和指针运算符（如、等）。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句（如for、while等）和switch语句。通过这些控制结构，可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元，可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型（如int、float等），并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针，可以实现对内存的间接访问和修改。C语言中定义指针使用星号（）符号，指向数组、字符串和结构体等数据结构时，还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构，可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型，通常以字符串常量的形式出现，用双引号（"..."）括起来，末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成，每个成员可以是不同的数据类型；联合由多个变量组成，它们共用同一块内存空间。通过结构体和联合，可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数（如fopen、fclose、fread、fwrite等）实现对文件的读写操作。文件操作函数通常返回文件指针，用于表示打开的文件。通过文件指针，可以进行文件的定位、读写等操作。 总之，C语言是一种功能强大、灵活高效的编程语言，广泛应用于各种领域。掌握C语言的基本语法和数据结构，可以为编程学习和实践打下坚实的基础。
python松鼠代码
05-13
Python松鼠代码是一段Python代码，用来模拟松鼠在树上攀爬和跳跃的动作。该代码主要使用了Python中的turtle库，可以在屏幕上绘制出松鼠的运动轨迹。 以下是一个简单的Python松鼠代码示例： ```python import ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值