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程序设计有所帮助。

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
简单的jQuery入门指引
Jul 28 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Vue实现验证码功能
Dec 03 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
You might like
简单的cookie计数器实现源码
2013/06/07 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
django云端留言板实例详解
2019/07/22 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python如何对链表操作
2020/10/10 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
前台接待岗位职责
2013/12/03 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
安全教育观后感
2015/06/17 职场文书
保护动物的宣传语
2015/07/13 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
MySQL 数据表操作
2022/05/04 MySQL