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 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
js运动事件函数详解
Oct 21 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
vue+Element-ui实现分页效果
Nov 15 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python实现多属性排序的方法
2018/12/05 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
《月光启蒙》教学反思
2014/03/01 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
擅自离岗检讨书
2014/09/12 职场文书
三严三实学习心得体会
2014/10/13 职场文书
收银员岗位职责范本
2015/04/07 职场文书
小学教师见习总结
2015/06/23 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
详解Python中下划线的5种含义
2021/07/15 Python
python单向链表实例详解
2022/05/25 Python