编程 Javascript

JS实现简洁、全兼容的拖动层实例

Posted in Javascript onMay 13, 2015

本文实例讲述了JS实现简洁、全兼容的拖动层。分享给大家供大家参考。具体分析如下：

这是一款最简洁的JS层拖动代码，全兼容ie、ff、opera、safari……每一种浏览器都有对应的判断和实现方法，你只需复制代码到你的网页中就可使用。水平高的朋友可以继续修改，添加更多方法，使其功能更强大。

<!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=utf-8" />
<title>JS拖动层</title>
</head>
<body>
<div id="f" style="position: absolute; width: 216px; height: 138px; 
background-color: skyblue;font-size: 12px; top: 210px; left: 180px;
z-index: 101; border: solid 1px blue;">
<div id="title" style="background-color: Blue; cursor: move; 
height: 20px; color: #fff;font-size: 12px; 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>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现简洁、全兼容的拖动层实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述

Jun 19 Javascript

js调用打印机打印网页字体总是缩小一号的解决方法

Jan 24 Javascript

js变量、作用域及内存详解

Sep 23 Javascript

js添加select下默认的option的value和text的方法

Oct 19 Javascript

浅析JavaScript 调试方法和技巧

Oct 22 Javascript

JS继承与闭包及JS实现继承的三种方式

Oct 15 Javascript

如何快速解决JS或Jquery ajax异步跨域的问题

Jan 08 jQuery

vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

Jul 12 Javascript

微信小程序实现动态列表项的顺序加载动画

Jul 25 Javascript

通过原生vue添加滚动加载更多功能

Nov 21 Javascript

JS实现小星星特效

Dec 24 Javascript

解决vue中axios设置超时(超过5分钟)没反应的问题

Sep 04 Javascript

javascript实现图片跟随鼠标移动效果的方法

May 13 #Javascript

javascript鼠标滑动评分控件完整实例

May 13 #Javascript

javascript实现链接单选效果的方法

May 13 #Javascript

javascript实现table选中的行以指定颜色高亮显示的方法

May 13 #Javascript

javascript实现table表格隔行变色的方法

May 13 #Javascript

javascript模拟评分控件实现方法

May 13 #Javascript

javascript动态设置样式style实例分析

May 13 #Javascript