编程 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 相关文章推荐

JS随即打乱数组实现代码

Dec 03 Javascript

js获取事件源及触发该事件的对象

Oct 24 Javascript

jquery获取元素值的方法(常见的表单元素)

Nov 15 Javascript

jQuery选择器源码解读（七）：elementMatcher函数

Mar 31 Javascript

JavaScript操作XML/HTML比较常用的对象属性集锦

Oct 30 Javascript

基于jQuery实现美观且实用的倒计时实例代码

Dec 30 Javascript

AngularJS表达式讲解及示例代码

Aug 16 Javascript

Ajax与服务器（JSON）通信实例代码

Nov 05 Javascript

基于bootstrap风格的弹框插件

Dec 28 Javascript

vue 的点击事件获取当前点击的元素方法

Sep 15 Javascript

一起深入理解js中的事件对象

Feb 06 Javascript

javascript的setTimeout()使用方法总结

Nov 20 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