这是一个完美的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> </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>