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

最新推荐文章于 2024-06-11 23:09:25 发布
最新推荐文章于 2024-06-11 23:09:25 发布
阅读量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 1417
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
Spring应用如何打印access日志和out日志（用于分析请求总共在服务耗费多长时间）
weixin_54925172的博客
06-11 489
我们经常会被问到这样一个问题。你接口返回的好慢呀，能不能提升一下接口响应时间啊？这个时候我们就需要去分析，为什么慢，慢在哪。而这首先应该做的就是确定接口返回时间过长确实是在服务内消耗的时间。而不是我们将请求发给网关或者nignx，由nignx或者网关转发给我们服务的过程消耗时间。这个时间我们就需要借助我们的acccess日志和out日志了。
一个c语言编写的sock5代理工具.zip
最新发布
06-13
一个c语言编写的sock5代理工具
python松鼠代码
05-13
Python松鼠代码是一段Python代码，用来模拟松鼠在树上攀爬和跳跃的动作。该代码主要使用了Python中的turtle库，可以在屏幕上绘制出松鼠的运动轨迹。 以下是一个简单的Python松鼠代码示例： ```python import turtle def tree(branchLen,t): if branchLen > 5: t.forward(branchLen) t.right(20) tree(branchLen-15,t) t.left(40) tree(branchLen-15,t) t.right(20) t.backward(branchLen) def main(): t = turtle.Turtle() myWin = turtle.Screen() t.left(90) t.up() t.backward(100) t.down() t.color("green") tree(75,t) myWin.exitonclick() main() ``` 这段代码主要实现了一个递归函数tree()，用于绘制松树的分支。在main()函数中，我们创建了一个Turtle对象t，然后将其定位在屏幕中心下方，绘制出一棵绿色的松树。 如果你想了解更多关于Python松鼠代码的实现方式和细节，可以参考相关教程或资料。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值