本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
