`
ufopw
  • 浏览: 163048 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

JS实现拖动层（兼容大部分浏览器）

浏览器IEJavaScriptXHTMLF# 
阅读更多
一个比较好的js拖动层代码，发上来共享一下。 
<!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>JS拖动层</title>
</head>

<body>
<div id="f" style="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">
  <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;"> 拖动层 </div>
  </div>
<script type="text/javascript">
var posX;
var posY;  
fdiv = document.getElementById("f");  
document.getElementById("title").onmousedown=function(e)
{
  if(!e) e = window.event; //如果是IE
  posX = e.clientX - parseInt(fdiv.style.left);
  posY = e.clientY - parseInt(fdiv.style.top);
  document.onmousemove = mousemove;  
}
document.onmouseup = function()
{
  document.onmousemove = null;
}
function mousemove(ev)
{
  if(ev==null) ev = window.event;//如果是IE
  fdiv.style.left = (ev.clientX - posX) + "px";
  fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>

</body>
</html>
分享到：
评论
发表评论

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

相关推荐

    js弹出层可拖动兼容各大浏览器

    "js弹出层可拖动兼容各大浏览器"这个主题涵盖了如何利用JavaScript实现一个弹出窗口，并确保它在各种浏览器（如Chrome、Firefox、Safari、Edge和IE等）上具有良好的兼容性。下面我们将深入探讨这一技术。 首先，...

    简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

    标题中的“简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器”是指一种使用JavaScript实现的弹窗功能，它具有美观的界面设计，并且允许用户自由地拖动弹窗位置，同时该代码兼容多数主流浏览器，提供了良好的用户体验。...

    js弹出层+可拖动+兼容各大浏览器(综合版)

    弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 ...

    js弹出层可拖动兼容各大浏览器.pdf

    本文将详细讲解如何创建一个可拖动且兼容各大浏览器的 JavaScript 弹出层，并探讨相关技术要点。 首先，为了实现弹出层的拖动功能，我们需要监听鼠标事件。当用户点击弹出层标题区域时，记录下初始鼠标位置和当前...

    拖拽兼容浏览器的容器js

    "拖拽兼容浏览器的容器js"是一个专注于实现跨浏览器拖放功能的JavaScript库。这个库的核心目标是确保在各种主流浏览器上，包括Chrome、Firefox、Safari、Edge和Internet Explorer等，都能实现一致的拖放体验。 在...

    js弹出层可拖动兼容各大浏览器(20211002200327).pdf

    本文档“js弹出层可拖动兼容各大浏览器”提供了一个实现这种功能的示例代码，主要涉及到以下几个关键知识点： 1. **预加载图片**： 代码首先定义了一个数组`imgname`，包含了弹出层边框图片的路径，并通过循环预...

    js弹出层可拖动兼容各大浏览器[文].pdf

    JavaScript 是实现弹出层动态效果的重要工具，通过它可以创建可拖动的弹出层，并确保在不同浏览器间具有良好的兼容性。本文将详细讲解如何利用JavaScript实现这一功能。 首先，我们需要准备一些资源，如弹出层边框...

    jQuery 弹出浮动层兼容各种浏览器

    本文将深入探讨如何使用jQuery实现一个兼容多种浏览器的弹出浮动层，同时具备可拖动和透明度调整功能。 首先，让我们从标题开始。"jQuery 弹出浮动层"指的是在网页上创建一个可以浮动且能在页面上任意位置显示的...

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

    本文将详细介绍一个JavaScript脚本，该脚本可以实现图片的放大、缩小以及拖拽功能，并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本，我们可以为用户提供更加灵活的图片浏览体验。 #### 核心...

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

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

    兼容主流浏览器的纯JS动态拖动表格实现行列内容交换

    项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一...就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。

    简单时尚的js弹窗可以自由拖拽同时兼容主流浏览器.zip

    本资源"简单时尚的js弹窗可以自由拖拽同时兼容主流浏览器.zip"正是为实现这样的目标而设计的。下面我们将详细探讨这个资源中的关键知识点。 首先，"简单时尚的js弹窗"意味着这个弹窗设计注重用户体验，界面简洁，...

    原生JS实现拖拽排序（亲测可用）

    在JavaScript的世界里，拖拽排序是一项常见的交互功能，它允许用户通过鼠标拖动元素来改变它们的顺序。原生JS实现拖拽排序可以避免引入额外的库，从而提高页面性能和减少依赖。以下是一个详细的知识点说明，涵盖了...

    js弹出框-弹出层-拖拽-兼容

    在这个"js弹出框-弹出层-拖拽-兼容"的插件中，开发者通过纯JavaScript实现了弹出层的创建、拖拽功能的添加，并优化了代码以适应多种浏览器环境。这个插件的价值在于它不需要依赖jQuery或其他大型库，降低了页面加载...

    JQuery图片拖动排序兼容各种浏览器

    "JQuery图片拖动排序兼容各种浏览器"是一个旨在提升用户操作体验的功能，它允许用户通过拖放操作来改变图片的顺序，这种功能尤其适用于展示可自定义顺序的图像列表，如相册、产品展示等。下面我们将深入探讨这一技术...

    原生javascript实现拖拽改变table表格行高（html）

    标题提到的“原生javascript实现拖拽改变table表格行高”是一项技术挑战，因为大部分在线资源都集中在改变列宽上，而对行高的调整相对较少。 首先，我们需要理解HTML表格的基本结构。表格由`&lt;table&gt;`元素定义，内部...

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

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

    JS模拟滚动条，兼容各浏览器

    系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容...拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。 代码未整理，可能比较乱。

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