文档章节

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
合肥
私信 提问
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
40 个轻量级 JavaScript 库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸...

晨曦之光
2012/03/09
0
0
从零开始学 Web 之 HTML(一)认识前端

大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩...

fengdaoting
05/20
0
0
JX(Javascript eXtension tools - Javascript 扩展工具库)

JX(Javascript eXtension tools - Javascript 扩展工具库) 站在巨人的肩上 Standing on shoulders of giants 简介 JX 适用于 Web Page 和 Web App 的开发, 目前已经应用与WebQQ2.0和WebQQ3....

Enchanted
2012/03/24
0
0
想做web开发,就学JavaScript

原文出处:Tony Patton 译文出处:腊八粥 有一天我被问到,为了快速地在web开发工作上增加优势,应该学习什么语言。我的思绪回到了大学,那时候我用Pascal、Fortran、C和汇编语言,不过那个时...

Tony Patton
2014/12/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

搬瓦工DC3机房和DC8机房哪个速度快,应该选哪个?

搬瓦工DC3机房和DC8机房都是搬瓦工CN2,那么这两个机房比较哪个机房速度快?搬瓦工DC3机房和DC8机房应该选择哪个机房?移动用户用DC8机房还是DC3机房?联通用DC3还是DC8快?电信应该选DC3还是...

Alanbrooke
13分钟前
1
0
探秘Runtime - Runtime介绍

该文章属于<简书 — 刘小壮>原创,转载请注明: <简书 — 刘小壮> https://www.jianshu.com/p/ce97c66027cd Runtime是iOS系统中重要的组成部分,面试也是必问的问题,所以Runtime是一个iOS工...

刘小壮
15分钟前
1
0
图形用户界面和交互输入方法---小结

中国龙-扬科
31分钟前
1
0
当程序员有了中年危机 你会发现你就是个屁

前言 程序员是一个怎样的存在?引用一句鸡汤的名言来说:你以为你用双手改变了世界,实际上是苍老了自己。为什么我今天会抛出这个话题,其实我也是一个懵懂的少年,我也曾经为了成为一名程序...

架构师springboot
41分钟前
11
0
大型网站B2C商城项目实战+MongoDB+Redis+zookeeper+MySQL

本文列出了当今计算机软件开发和应用领域最关键部分,如果你想保证你现在以及未来的几年不失业,那么你最好跟上这些技术的发展。虽然你不必对这十种技术样样精通,但至少应该对它们非常熟悉。...

java知识分子
42分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部