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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
laypage分页控件使用实例详解
May 19 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python3实现单目标粒子群算法
2019/11/14 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
演讲比赛获奖感言
2014/02/02 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
会计学毕业生求职信
2014/06/25 职场文书
公共场所标语
2014/06/30 职场文书
大学生自荐书范文
2015/03/05 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python