`
javasee
  • 浏览: 973318 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

DIV在FF下的拖动

 
阅读更多
我想问一下,我的这段拖动div的代码什么地方有问题啊,在ie里面正常,在ff下就是停下再拖就不行了,但如果在div中加入文本就可以了,为什么会这样啊?请各位高手指教.

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1<html>
 2
 3<head>
 4<script language="JavaScript" type="text/javascript" src="jquery-1.6.4.js"></script>
 5<style>
 6
 7</style>
 8</head>
 9<body><head>
10<script language="JavaScript" type="text/javascript" src="jquery-1.6.4.js"></script>
11<style>
12
13</style>
14</head>
15
16
17<div id="rect" style="width:200px;height:200px;position:absolute;background-color:pink;">
18
19</div>
20
21<div id="display" style="position:absolute;top:300px;"></div>
22</body>
23</html>
24
25<script>
26
27$(init);
28
29function init(){
30rectEvent();
31}

32
33function rectEvent(){
34var slider = $("#rect");
35var downFlag = false;
36
37var offX;
38
39slider.mousedown(function(e){
40downFlag = true;
41var event = getEvent(e);
42offX = getOffsetX(event);
43
44}
);
45
46slider.mouseup(function(){
47downFlag = false;
48}
);
49
50slider.mouseout(function(){
51downFlag = false;
52}
);
53
54slider.mousemove(function(e){
55var event = getEvent(e);
56
57if(!downFlag){
58return false;
59}

60
61var left = event.clientX - offX;
62$("#display").text(left);
63slider.css("left",left);
64}
);
65
66}

67
68
69function getEvent(event){
70var event = event ? event : window.event;
71return event;
72}

73
74function getOffsetX(event){
75var off_X = event.offsetX ? event.offsetX : event.layerX;
76return off_X;
77}

78
79</script>
80

如果我在rect div随便加入文本如:<div id="rect" style="width:200px;height:200px;position:absolute;background-color:pink;">11</div>,这样就可以了,我一直不太明白为什么会这样?请名位大侠指教.
分享到:
评论

相关推荐

    纯JS拖动DIV,兼容IE6、7、8、9、FF、Chrome

    纯JS拖动IDV,不需要第三方库,兼容IE6 7 8 9 以上版本和 谷歌、火狐浏览器。代码简洁,在FF 谷歌浏览器 是拖动时,鼠标可以保持MOVE样式不变。

    javascript之DIV拖动类 支持在FF下拖动,调用简单

    本文档主要介绍了一种JavaScript实现的DIV拖动类,该类特别强调了在Firefox(FF)浏览器下的兼容性与简单的调用方式。拖动功能是网页交互设计中的一个重要组成部分,尤其是在用户界面设计中,能够极大地提升用户体验...

    兼容的div拖动功能

    自己写的,欢迎大家来批评打击我,也希望能够给新手带点启发

    jquery拖动编辑div

    在本文中,我们将深入探讨如何使用jQuery实现一个可拖动且可编辑的div元素,包括关闭功能和颜色变换。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得创建交互式Web应用变得更为简单。 ...

    动态改变左侧Div宽度

    移动左边div可使其宽度自动改变 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; ; charset=gb2312"/&gt; 无标题文档&lt;/title&gt; ...

    可拖动、可关闭、透明标题的DIV弹出窗口,完美兼容各个浏览器

    纯JS制作的可拖动、带关闭按钮、带透明标题栏的DIV弹出窗口,完美兼容IE,FF,chrome等浏览器,测试通过,里面的样式大家可以自己DIY

    Div 弹出信息框例子

    在这个场景下,我们将Div元素用于构建自定义的弹出框,而不是依赖于JavaScript库或浏览器内置的alert、confirm等方法。这种做法的好处在于我们可以自定义样式,使弹出框与网站整体设计保持一致,提高用户体验。 ...

    用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    当鼠标按下时记录起始坐标,然后在`mousemove`事件中计算当前鼠标的偏移量,更新图片的位置。 5. **还原功能**: 还原图片到原始状态,即清除所有缩放和平移操作,可以将图片的`width`和`height`设置回初始值,...

    弹出层,可拖动,IE,FF都支持

    在网页设计和开发中,"弹出层"是一种常见的用户界面元素,用于显示额外的信息或者交互功能,而不离开当前页面。...通过分析这些文件,我们可以深入了解如何创建一个在不同浏览器环境下具有良好用户体验的可拖动弹出层。

    超级爽的 js 遮罩层 谦容 FF IE 支持拖动...

    标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动"意味着我们找到了一个高效且具有良好用户体验的解决方案,它不仅能在多种浏览器上运行,还支持用户对遮罩层进行拖动操作。下面将详细介绍这个知识点。 首先,遮罩...

    兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽

    1. 兼容性问题处理:在标题和描述中提到了兼容IE和Firefox(FF),这可能意味着以下几点: - 使用JavaScript和CSS来实现网页元素的兼容性处理,特别是在老旧浏览器中。 - 在描述中提到的“div层”可能指的是一个在...

    移动div层.txt

    在`&lt;head&gt;`部分定义了一些样式和JavaScript脚本,在`&lt;body&gt;`部分放置了一个可拖动的`&lt;div&gt;`元素。 - **`&lt;div id="moveMe"&gt;`**:这个`&lt;div&gt;`拥有一个特定的ID(`moveMe`),并设置了一些CSS样式来使其可以被用户拖动...

    遮罩层提示框,可拖动(兼容IE、FF与谷歌)

    JS遮罩层,可拖动(兼容IE、FF与谷歌)

    用JS实现和google地图类似的图片查看器-放大、缩小、移动和还原,都控制在div里,兼容ie,FF

    这个查看器将具备放大、缩小、移动和还原图片的功能,并且能够在浏览器的div元素内运行,同时兼容Internet Explorer(IE)和Firefox等主流浏览器。 ### 1. 基本结构与HTML布局 首先,我们需要创建一个HTML页面,...

    纯js实现可拖拽和点击的悬浮球

    我们将监听用户的鼠标事件,包括`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放),以实现拖拽功能。首先,我们需要获取到悬浮球元素,并设置初始位置: ```javascript var draggableBall...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...

    自定义 alert() 范围 拖动 移动 DIV浮动层

    文件内包含有:1,自定义的类似浏览器内置的 alert() 函数 2,兼容IE/FF(ie/火狐firefox)的取出事件event 3,在document.body范围内移动浮动层,弹出框等 3个函数。

    经典的DIV+CSS小代码

    在网页设计领域,`DIV+CSS`是一种广泛采用的技术,用于布局和美化页面。这个压缩包包含了一系列实用的代码示例,适合初学者和有一定经验的WEB基础技术人员学习。下面,我们将逐一解析这些文件名所代表的HTML和CSS...

Global site tag (gtag.js) - Google Analytics