3顶

可任意拖动的DIV层

稿源：互联网 2022-04-28 08:41:14 点击： 4823 撤稿纠错

可任意拖动的DIV层，还可以保存最后一次的拖动效果，除非清除cookie

以下讨论的是和拖动特效相关的可任意拖动的DIV层教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=gb2312"> <title>Drag & Drop</title> <style type="text/css"> body{ background-color:#36393D; font-size:12px; margin:0px; } DIV.dragLayer{ border:1px solid #369; background-color:#6BBA70; margin-bottom:10px; } DIV.dragLayer_over{ border:1px solid #C79810; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; /* Moz + FF */ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ } DIV.clone_dragLayer_over{ border:1px dashed #FA0; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; /* Moz + FF */ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ margin-bottom:10px; } DIV.dragHeader{ width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF; } DIV.dragHeader_over{ width:100%; height:20px ; line-height:20px; background-color:#C79810; } SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings} #container{margin:0px} #leftcontainer{float:left; width:33%;} #middlecontainer{float:left; width:34%;} #middlecontainer div{margin-left:auto; margin-right:auto} #rightcontainer{float:right; width:33%;} #rightcontainer div{float:right} DIV.content{width:100%; padding:4px} </style> <script type="text/javascript"> var CoolDrag={ obj : null, //目标对象 cloneobj : null, //拖动对象 container : null, //容器 dragged : false, //拖动标志 shadow: null, //阴影 init:function(id){ CoolDrag.container = $(id); var cooldrag = CoolDrag.read("cooldrag"); if(cooldrag != ""){//读取cookie var subcontainer = cooldrag.split("|"); for(var i=0 ; i < subcontainer.length; i++){ var subcontainerItem = subcontainer[i].split(":"); if($(subcontainerItem[0])){ var items = subcontainerItem[1].split(","); for(var j=0; j< items.length; j++){ if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j])); } } } } cleanWhitespace(CoolDrag.container)//清除空白节点 var collection = CoolDrag.container.getElementsByTagName("DIV"); for(var i = 0; i < collection.length; i++){ if(collection[i].className == "dragLayer"){ var o = collection[i].firstChild; SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]); o.onmousedown = CoolDrag.start; } } document.onmousemove = CoolDrag.drag; document.onmouseup = CoolDrag.end; }, start:function(e){ if(!e) e = window.event; var obj = getT(e); if(obj.className == "min"){ CoolDrag.min(e); return; }else if(obj.className == "close"){ CoolDrag.close(e); return; }else{ if(obj.className != "dragHeader") obj = obj.parentNode; } CoolDrag.dragged = true; CoolDrag.obj = obj.parentNode; CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true); document.body.appendChild(CoolDrag.cloneobj); CoolDrag.shadow = document.createElement("DIV"); document.body.appendChild(CoolDrag.shadow); with(CoolDrag.cloneobj.style){ position = "absolute"; zIndex = 1000; left = getRealLeft(CoolDrag.obj) + "px"; top = getRealTop(CoolDrag.obj) + "px"; } with(CoolDrag.shadow.style){ position = "absolute"; zIndex = 999; left = getRealLeft(CoolDrag.obj) + 4 + "px"; top = getRealTop(CoolDrag.obj) + 4 + "px"; width = CoolDrag.obj.offsetWidth + "px"; height = CoolDrag.obj.offsetHeight + "px"; backgroundColor = "#ccc"; if(navigator.userAgent.indexOf("Gecko") != -1) MozOpacity = "0.5"; else if(navigator.userAgent.indexOf("MSIE") != -1) filter = "alpha(opacity=50)"; } CoolDrag.cloneobj.initMouseX = getMouseX(e); CoolDrag.cloneobj.initMouseY = getMouseY(e); CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj); CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj); //change style CoolDrag.cloneobj.firstChild.className="dragHeader_over"; CoolDrag.cloneobj.className = "dragLayer_over"; CoolDrag.obj.className="clone_dragLayer_over"; }, drag:function(e){ if(!CoolDrag.dragged||CoolDrag.obj==null)return; if(!e) e = window.event; var currenX = getMouseX(e); var currenY = getMouseY(e); if(CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container)) CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX) + "px"; else CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px"; if(CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container)) CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY) + "px"; else CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px"; var collection = CoolDrag.container.getElementsByTagName("DIV"); var finded = false; for(var i = 0; i < collection.length; i++){ var o = collection[i]; if(o.className == "dragLayer"){ if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) || (getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) && getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop) { //window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8); if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){ o.parentNode.insertBefore(CoolDrag.obj,o); }else{ if(o.nextSibling) o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling); else o.parentNode.appendChild(CoolDrag.obj); } finded = true; break; } } } if(!finded){ for(var i = 0; i < CoolDrag.container.childNodes.length; i++){ var o = CoolDrag.container.childNodes[i]; if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) o.appendChild(CoolDrag.obj); } } with(CoolDrag.shadow.style){ left = (CoolDrag.cloneobj.offsetLeft + 4) + "px"; top = (CoolDrag.cloneobj.offsetTop + 4) + "px"; } //document.title = CoolDrag.cloneobj.style.left + "|" + CoolDrag.shadow.style.left; }, end:function(e){ if(!CoolDrag.dragged)return; CoolDrag.obj.className = "dragLayer"; CoolDrag.dragged = false; CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow); CoolDrag.timer = CoolDrag.repos(150,15); //保存cookie var str=""; for(var i=0; i<CoolDrag.container.childNodes.length; i++){ var o = CoolDrag.container.childNodes[i]; if(i>0)str += "|"; str += o.id + ":"; for(var j=0; j < o.childNodes.length; j++){ if(j>0)str += ","; str += o.childNodes[j].id ; } } CoolDrag.save("cooldrag",str,24); }, repos:function(aa,ab){ //var f=CoolDrag.obj.filters.alpha.opacity; var tl=getRealLeft(CoolDrag.cloneobj); var tt=getRealTop(CoolDrag.cloneobj); var kl=(tl-getRealLeft(CoolDrag.obj))/ab; var kt=(tt-getRealTop(CoolDrag.obj))/ab; //var kf=f/ab; return setInterval(function(){if(ab<1){ clearInterval(CoolDrag.timer); CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj); CoolDrag.obj=null; return; } ab--; tl-=kl; tt-=kt; //f-=kf; CoolDrag.cloneobj.style.left=parseInt(tl)+"px"; CoolDrag.cloneobj.style.top=parseInt(tt)+"px"; //CoolDrag.tdiv.filters.alpha.opacity=f; } ,aa/ab) }, min:function(e){ if(!e) e = window.event; var obj = getT(e); var rootObj = obj.parentNode.parentNode.parentNode; var id = rootObj.id; if(SavedObject.getStatus(id)[1]){ SavedObject.setStatus(id,0); rootObj.style.height = "20px"; rootObj.childNodes[1].style.display = 'none'; }else{ SavedObject.setStatus(id,1); rootObj.lastChild.style.display = ''; rootObj.style.height = SavedObject.getStatus(id)[2]; } obj.innerHTML = obj.innerHTML==0 ? 2 :0; }, close:function(e){ if(!e) e = window.event; var obj = getT(e); var rootObj = obj.parentNode.parentNode.parentNode; rootObj.parentNode.removeChild(rootObj); }, save:function(name, value, hours){ var expire = ""; if(hours != null) { expire = new Date((new Date()).getTime() + hours * 3600000); expire = "; expires=" + expire.toGMTString(); } document.cookie = name + "=" + escape(value) + expire; }, read:function(name){ var cookieValue = ""; var search = name + "="; if(document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; cookieValue = unescape(document.cookie.substring(offset, end)) } } return cookieValue; } } function $(id){ return document.getElementById(id); } function getT(e){ return e.target || e.srcElement; } function getMouseX(e){ return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft; } function getMouseY(e){ return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop; } function getRealLeft(o){ var l = 0; while(o){ l += o.offsetLeft - o.scrollLeft; o = o.offsetParent; } return(l); } function getRealTop(o){ var t = 0; while(o){ t += o.offsetTop - o.scrollTop; o = o.offsetParent; } return(t); } function cleanWhitespace(node) { var notWhitespace = /S/; for (var i=0; i < node.childNodes.length; i++) { var childNode = node.childNodes[i]; if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) { node.removeChild(node.childNodes[i]); i--; } if (childNode.nodeType == 1) { cleanWhitespace(childNode); } } } var SavedObject={ elements : new Array(), setStatus : function(id,s){ for(var i=0;i<SavedObject.elements.length;i++){ if(SavedObject.elements[i][0]==id){ SavedObject.elements[i][1]=s; break; } } }, getStatus : function(id){ for(var i=0;i<SavedObject.elements.length;i++){ if(SavedObject.elements[i][0]==id)return SavedObject.elements[i]; } }, push : function(o){ SavedObject.elements[SavedObject.elements.length]=o; } } </script> </head> <body onLoad="CoolDrag.init('container');"> <div id="container"> <div id="leftcontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win1"> <div class="dragHeader"> <div style="float:left">第一个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 1</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win2"> <div class="dragHeader"> <div style="float:left">第二个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 2</div> </div> </div> <div id="middlecontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win3"> <div class="dragHeader"> <div style="float:left">第三个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 3</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win4"> <div class="dragHeader"> <div style="float:left">第四个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 4</div> </div> </div> <div id="rightcontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win5"> <div class="dragHeader"> <div style="float:left">第五个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 5</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win6"> <div class="dragHeader"> <div style="float:left">第六个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 6</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win7"> <div class="dragHeader"> <div style="float:left">第七个窗口</div> <div style="float:right; ">0r</div> </div> <div class="content">window 7</div> </div> </div> </div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于可任意拖动的DIV层的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200811071243.shtml方便下次再访问哦。

·上一篇： 一个超酷弹出窗口登陆框效果
·下一篇： js拖放效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

可任意拖动的DIV层

文章分类LIST >>返回首页

最新游戏

最新新闻