JavaScript拖动层Div代码


Posted in Javascript onMarch 01, 2017

效果图:(灰色区域可拖动)

JavaScript拖动层Div代码

代码如下:

<!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>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;} .div{ width:100px; height:100px; position:absolute;left:100px; top:100px; background:#ccc;}
</style>
</head>
<body>
 <div class="div">
 </div>
 <script type="text/javascript">
  var div = document.getElementsByTagName('div')[0];
  var zIndex = 6;
  drag(div);
  div.ondblclick = function() {
  alert("ok");
  };
  function drag(oDrag) {
  var disX = dixY = 0;
  oDrag.onmousedown = function(event) {
   var event = event || window.event;
   disX = event.clientX - this.offsetLeft;
   disY = event.clientY - this.offsetTop;
   var oTemp = this.cloneNode(true);
   document.body.appendChild(oTemp);
   document.onmousemove = function(event) {
   var event = event || window.event;
   var iL = event.clientX - disX;
   var iT = event.clientY - disY;
   var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
   var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
   iL <= 0 && (iL = 0);
   iT <= 0 && (iT = 0);
   iL >= maxL && (iL = maxL);
   iT >= maxT && (iT = maxT);
   oTemp.style.zIndex = zIndex++;
   oTemp.style.opacity = "0.5";
   oTemp.style.filter = "alpha(opacity=50)";
   oTemp.style.left = iL + "px";
   oTemp.style.top = iT + "px";
   return false;
   };
   document.onmouseup = function() {
   document.onmousemove = null;
   document.onmouseup = null;
   oDrag.style.opacity = oTemp.style.opacity;
   var arr = {
    left: oTemp.offsetLeft,
    top: oTemp.offsetTop
   };
   oDrag.style.zIndex = oTemp.style.zIndex;
   oAnimate(oDrag, arr, 300,
   function() {
    document.body.removeChild(oTemp);
   });
   oDrag.releaseCapture && oDrag.releaseCapture()
   };

   this.setCapture && this.setCapture();
   return false
  }
  }
  function oAnimate(obj, params, time, handler) {
  var node = typeof obj == "string" ? $(obj) : obj;
  var _style = node.currentStyle ? node.currentStyle: window.getComputedStyle(node, null);
  var handleFlag = true;
  for (var p in params) { (function() {
   var n = p;
   if (n == "left" || n == "top") {
    var _old = parseInt(_style[n]);
    var _new = parseInt(params[n]);
    var _length = 0,
    _tt = 10;
    if (!isNaN(_old)) {
    var count = _old;
    var length = _old <= _new ? (_new - _old) : (_old - _new);
    var speed = length / time * _tt;
    var flag = 0;
    var anim = setInterval(function() {
     node.style[n] = count + "px";
     count = _old <= _new ? count + speed: count - speed;
     flag += _tt;
     if (flag >= time) {
     node.style[n] = _new + "px";
     clearInterval(anim);
     if (handleFlag) {
      handler();
      handleFlag = false;
     }
     }
    },
    _tt);
    }

   }
   })();
  }
  }
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js onload事件不起作用示例分析
Oct 09 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
vue组件间通信解析
Mar 01 #Javascript
性能优化之代码优化页面加载速度
Mar 01 #Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 #Javascript
Javascript仿京东放大镜的效果
Mar 01 #Javascript
Ajax实现不刷新取最新商品
Mar 01 #Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
Position属性之relative用法
2015/12/14 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
Angular2入门--架构总览
2017/03/29 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
2015年小学生暑假总结
2015/07/13 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis