文档章节

JS实现拖动层(兼容大部分浏览器)

hefeiuu
 hefeiuu
发布于 2017/05/04 20:27
字数 180
阅读 4
收藏 0
一个比较好的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>

本文转载自:http://ufopw.iteye.com/blog/355579

共有 人打赏支持
hefeiuu
粉丝 3
博文 64
码字总数 0
作品 0
合肥
私信 提问
jCanvas:当 jQuery遇上HTML5 Canvas

什么是 jCanvas ? jCanvas 官网是这样解释的: “ jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new feature......

力谱宿云
2016/08/18
545
1
好用的高质量 JavaScript 库一览

编辑器 1、Code Mirror 又一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。...

彭博
2012/03/13
4.6K
5
IE6终极备忘:修复IE6下 25+ Bugs

作者: xcntime 发表于 2010-08-11 10:49 原文链接 阅读: 0 评论: 0 [译]IE6终极备忘:修复IE6下 25+ Bugs 2010年01月08日 | HTML/CSS, JavaScript 去年就想将IE的bug系统地整理下,但一直都忙...

xcntime
2010/08/16
0
0
用于构建交互式图表的最佳 jQuery 图表库

对于JQuery图表来说,其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据,而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图...

oschina
2013/12/07
15.5K
24
20 个简化开发任务的 JavaScript 库

所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的JavaScript代码集。JavaScript主要用于写内嵌于HTML页面并和文档对象模型(DOM...

oschina
2013/07/04
13.4K
34

没有更多内容

加载失败,请刷新页面

加载更多

推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
19分钟前
0
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
30分钟前
0
0
协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
39分钟前
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linux-tao
今天
2
0
在 Ubuntu 上为 CentOS 编译 Rust 程序

现在 CentOS 8 还没出来,最新的是 CentOS 7.6,上面搭载的 glibc 版本是 2.17,都已经是 2012 年那时候的版本了。 现在开发者比较常用的桌面 Linux 系统,比如 Ubuntu / Debian / Mint / A...

helloclia
今天
18
3

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部