JavaScript实现可拖拽的拖动层Div实例


Posted in Javascript onAugust 05, 2015

本文实例讲述了JavaScript实现可拖拽的拖动层Div。分享给大家供大家参考。具体如下:

这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,经过了多次优化修正,复制节点的方法不错,值得JS爱好者学习,同时代码修正了给拖拽元素加ondblclick事件无效的问题,兼容多种浏览器,拷贝代码即可运行使用。

运行效果如下图所示:

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

Javascript 相关文章推荐
浅谈javascript 函数属性和方法
Jan 21 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 #Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 #Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 #Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 #Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 #Javascript
JS模拟键盘打字效果的方法
Aug 05 #Javascript
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JavaScript 基本概念
2015/01/20 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
node.js实现端口转发
2016/04/14 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
webpack分离css单独打包的方法
2018/06/12 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python中的闭包函数
2018/02/09 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
体育教师自荐信范文
2013/12/16 职场文书
银行学习十八大感想
2014/01/11 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
爱祖国演讲稿
2014/05/04 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android