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

2019-11-20 11:54:40

字体：大中小

来源：转载

供稿：网友

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

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

运行效果如下图所示：

具体代码如下：

<!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悬停控制图片轮播――代码简单