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

js实现拖动层，兼容IE/FireFox

    博客分类：
  • html
IEFirefoxXHTMLUPHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<script>

var posX;   
var posY;   
var popDiv;   
var dragable;   
  
function down(e){   
    popDiv = document.getElementById("pop-editor");   
    e = e || window.event; //如果是IE    
    posX = e.clientX - parseInt(popDiv.style.left);      
    posY = e.clientY - parseInt(popDiv.style.top);   
    dragable = true;   
    document.onmousemove = move;   
}   
  
function move(ev){   
    if(dragable == true){   
        ev = ev || window.event;//如果是IE   
        popDiv.style.left = (ev.clientX - posX) + "px";      
        popDiv.style.top = (ev.clientY - posY) + "px";      
    }   
}   
  
function up(){   
    dragable = false;   
}  


</script> 


<div id='pop-editor' style='width: 520px;height:430px;border:1px solid red;position: absolute;left:100px;top:200px;' onmousedown='down(event)' onmouseup='up()'>稍等哈</div> 

</body>
</html>

 

分享到：
| Hibernate批量插入的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js绘图类库(兼容IE/FF/chrome) web流程图、图表

    1、基于raphael2.0的绘图(内含大量...2、几乎兼容所有浏览器包括ie, firefox,chrome,opera, Safari 3、内含说明文档和演示代码，详见demo文件夹 4、可动态拖动图形(贝磁曲线、动态拾色器、图表、地图导航、流程图等）。

    js放大缩小拖拽图片（兼容IE、火狐）

    ### js放大缩小拖拽图片（兼容IE、火狐） #### 概述 本文将详细介绍一个JavaScript脚本，该脚本可以实现图片的放大、缩小以及拖拽功能，并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本，...

    js 禁止选择功能实现代码(兼容IE/Firefox)

    本文将详细介绍如何通过JavaScript和CSS来实现这一功能，并确保在IE和Firefox等浏览器中的兼容性。 首先，针对IE和Chrome浏览器，我们可以利用JavaScript事件处理函数`onselectstart`来阻止文本选择。`...

    鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox

    table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 序号 公司名称 订单客户 部门 业务员 交款方式 1 软件开发网 jb51.net 广告部 王天一 现金 ...

    html+js实现可拖动，兼容IE7及以上firefox、谷歌等各版本弹出层并锁屏效果代码

    在这个项目中，我们讨论的是如何使用这两种语言来创建一个可拖动的弹出层，并实现兼容IE7及以上版本，包括Firefox和Chrome在内的多种浏览器的锁屏效果。这个功能在网页应用中很常见，比如在显示模态对话框或提示信息...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    通过这种方式，我们可以创建一个兼容IE和Firefox的拖动事件模型。这个模型不仅适用于拖动，还可以扩展到其他需要跨浏览器事件处理的场景。记住，兼容性是Web开发中的重要课题，理解和掌握各种浏览器的差异对于构建...

    完全兼容ie与firefox的拖动层

    完全兼容ie与firefox的拖动层! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    可拖动div层，兼容IE火狐等浏览器

    总的来说，实现"可拖动div层，兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用，尤其是jQuery的使用，可以高效地创建出用户友好的交互体验。通过学习和理解这些文件，你可以掌握如何在自己的项目中创建...

    一个超简单的JS拖拽实现代码(兼容IE,Firefox)

    runcode div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]javascript支持firefox,ie7页面布局拖拽效果代码

    可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]

    总的来说，"可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"是一个涉及到JavaScript事件处理、浏览器兼容性以及用户交互设计的实用技术，它提升了网页的用户体验，同时也体现了前端开发者对细节和用户...

    JS弹出可拖拽的层IE,火狐都可以兼容

    点击链接可以弹出一个拖拽的层,IE,火狐都可以兼容。

    兼容ＩＥ与火狐的拖动div效果

    本文将详细讲解如何实现一个兼容IE和Firefox的拖动div效果。 首先，我们需要了解两种浏览器对拖放事件的支持情况。Internet Explorer（IE）从版本5.5开始支持DOM级别的拖放，而Firefox则从版本3.5开始支持W3C标准的...

    jquery 弹出框，可以拖动。在任兼容ie6~ie9 firefox 谷歌

    在任兼容ie6~ie9 firefox 谷歌”指的是一个基于jQuery实现的弹出对话框插件，它具有拖动功能，并且兼容Internet Explorer 6到9，以及Firefox和Google Chrome等现代浏览器。这个插件可能采用了jQuery的核心功能，如...

    js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    在JavaScript中实现鼠标拖动图片并兼容不同的浏览器，如IE、Firefox（FF）和Google Chrome，需要考虑浏览器之间的差异和事件处理方式。本示例提供了一段代码，它使用JavaScript来实现图片元素的拖放功能，并确保在...

    拖动的table(兼容Firefox 3.5 IE6)

    在web中模拟窗口表格控件，可以用鼠标拖动改变表格列宽,兼容Firefox 3.5和IE6浏览器。

    可拖动的层，兼容IE，火狐等

    该示例通过结合JavaScript与CSS实现了这一功能，并确保了其在不同浏览器（包括Internet Explorer 和 Firefox）中的兼容性。 ### 2. CSS样式定义 #### 2.1 绝对定位与层叠上下文 - **`position: absolute;`**：此...

    可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip

    "可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"是一个实现用户自定义表格列宽的功能，它允许用户通过鼠标拖动来改变表格中单元格的宽度，从而提升用户体验。这个功能对于那些需要频繁查看和比较数据的...

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx

    本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条，可以实现跨浏览器的滚动条样式统一，提高用户体验。 一、为什么需要...

Magicbox
Global site tag (gtag.js) - Google Analytics