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

本文实例讲述了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程序设计有所帮助。