拖动DIV如何保存的问题
Source Code to Run
<BR> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><BR><html xmlns="http://www.w3.org/1999/xhtml"><br><BR><head><br><BR><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br><BR><title>Drag & Drop</title><br><BR><style type="text/css"><br><BR>body{ background-color:#36393D; font-size:12px; margin:0px; }<br><BR>DIV.dragLayer{<br><BR>border:1px solid #369;<br><BR>background-color:#6BBA70;<br><BR>margin-bottom:10px;<br><BR>}<br><BR>DIV.dragLayer_over{<br><BR>border:1px solid #C79810;<br><BR>background-color:#6BBA70;<br><BR>filter:alpha(opacity=80);<br><BR>-moz-opacity:0.8; /* Moz + FF */<br><BR>opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/<br><BR>}<br><BR>DIV.clone_dragLayer_over{<br><BR>border:1px dashed #FA0;<br><BR>background-color:#6BBA70;<br><BR>filter:alpha(opacity=80);<br><BR>-moz-opacity:0.8; /* Moz + FF */<br><BR>opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/<br><BR>margin-bottom:10px;<br><BR>}<br><BR>DIV.dragHeader{<br><BR>width:100%; height:20px ; line-height:20px; background-color:#006E2E; <BR>color:#FFFFFF;<br><BR>}<br><BR>DIV.dragHeader_over{<br><BR>width:100%; height:20px ; line-height:20px; background-color:#C79810;<br><BR>}<br><BR>SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}<br><BR>#container{margin:0px}<br><BR>#leftcontainer{float:left; width:33%;}<br><BR>#middlecontainer{float:left; width:34%;}<br><BR>#middlecontainer div{margin-left:auto; margin-right:auto}<br><BR>#rightcontainer{float:right; width:33%;}<br><BR>#rightcontainer div{float:right}<br><BR>DIV.content{width:100%; padding:4px}<br><BR></style><br><BR><script type="text/javascript"><br><BR>var CoolDrag={<br><BR>obj : null, //目标对象<br><BR>cloneobj : null, //拖动对象<br><BR>container : null, //容器<br><BR>dragged : false, //拖动标志<br><BR>shadow: null, //阴影<br><BR><br><BR>init:function(id){<br><BR>CoolDrag.container = $(id);<br><BR>var cooldrag = CoolDrag.read("cooldrag");<br><BR>if(cooldrag != ""){//读取cookie<br><BR>var subcontainer = cooldrag.split("|");<br><BR>for(var i=0 ; i < subcontainer.length; i++){<br><BR>var subcontainerItem = subcontainer[i].split(":");<br><BR>if($(subcontainerItem[0])){<br><BR>var items = subcontainerItem[1].split(",");<br><BR>for(var j=0; j< items.length; j++){<br><BR>if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));<br><BR>}<br><BR>}<br><BR>}<br><BR>}<br><BR>cleanWhitespace(CoolDrag.container)//清除空白节点<br><BR>var collection = CoolDrag.container.getElementsByTagName("DIV");<br><BR>for(var i = 0; i < collection.length; i++){<br><BR>if(collection[i].className == "dragLayer"){<br><BR>var o = collection[i].firstChild; <br><BR>SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);<br><BR>o.onmousedown = CoolDrag.start;<br><BR>}<br><BR>}<br><BR>document.onmousemove = CoolDrag.drag;<br><BR>document.onmouseup = CoolDrag.end;<br><BR>},<br><BR><br><BR>start:function(e){<br><BR>if(!e) e = window.event;<br><BR>var obj = getT(e);<br><BR>if(obj.className == "min"){<br><BR>CoolDrag.min(e);<br><BR>return;<br><BR>}else if(obj.className == "close"){<br><BR>CoolDrag.close(e);<br><BR>return;<br><BR>}else{<br><BR>if(obj.className != "dragHeader") obj = obj.parentNode;<br><BR>}<br><BR>CoolDrag.dragged = true;<br><BR>CoolDrag.obj = obj.parentNode;<br><BR>CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);<br><BR>document.body.appendChild(CoolDrag.cloneobj);<br><BR>CoolDrag.shadow = document.createElement("DIV");<br><BR>document.body.appendChild(CoolDrag.shadow);<br><BR>with(CoolDrag.cloneobj.style){<br><BR>position = "absolute";<br><BR>zIndex = 1000;<br><BR>left = getRealLeft(CoolDrag.obj) + "px";<br><BR>top = getRealTop(CoolDrag.obj) + "px";<br><BR>}<br><BR>with(CoolDrag.shadow.style){<br><BR>position = "absolute";<br><BR>zIndex = 999;<br><BR>left = getRealLeft(CoolDrag.obj) + 4 + "px";<br><BR>top = getRealTop(CoolDrag.obj) + 4 + "px";<br><BR>width = CoolDrag.obj.offsetWidth + "px";<br><BR>height = CoolDrag.obj.offsetHeight + "px";<br><BR>backgroundColor = "#ccc";<br><BR>if(navigator.userAgent.indexOf("Gecko") != -1)<br><BR>MozOpacity = "0.5";<br><BR>else if(navigator.userAgent.indexOf("MSIE") != -1)<br><BR>filter = "alpha(opacity=50)";<br><BR>}<br><BR><br><BR>CoolDrag.cloneobj.initMouseX = getMouseX(e);<br><BR>CoolDrag.cloneobj.initMouseY = getMouseY(e);<br><BR>CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);<br><BR>CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);<br><BR>//change style<br><BR>CoolDrag.cloneobj.firstChild.className="dragHeader_over";<br><BR>CoolDrag.cloneobj.className = "dragLayer_over";<br><BR>CoolDrag.obj.className="clone_dragLayer_over";<br><BR>},<br><BR><br><BR>drag:function(e){<br><BR>if(!CoolDrag.dragged||CoolDrag.obj==null)return;<br><BR>if(!e) e = window.event;<br><BR>var currenX = getMouseX(e);<br><BR>var currenY = getMouseY(e);<br><BR><br><BR>if(CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX > <BR>getRealLeft(CoolDrag.container))<br><BR>CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL + currenX - <BR>CoolDrag.cloneobj.initMouseX) + "px";<br><BR>else<br><BR>CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";<br><BR>if(CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY > <BR>getRealTop(CoolDrag.container))<br><BR>CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY + currenY - <BR>CoolDrag.cloneobj.initMouseY) + "px";<br><BR>else<br><BR>CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";<br><BR>var collection = CoolDrag.container.getElementsByTagName("DIV");<br><BR>var finded = false;<br><BR>for(var i = 0; i < collection.length; i++){<br><BR>var o = collection[i];<br><BR>if(o.className == "dragLayer"){<br><BR>if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + <BR>o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) || <br><BR>(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth <BR>&&<br><BR>getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + <BR>CoolDrag.cloneobj.offsetWidth)) &&<br><BR>getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight <BR>>= CoolDrag.cloneobj.offsetTop)<br><BR>{<br><BR>//window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - <BR>8);<br><BR>if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){<br><BR>o.parentNode.insertBefore(CoolDrag.obj,o);<br><BR>}else{<br><BR>if(o.nextSibling)<br><BR>o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling);<br><BR>else<br><BR>o.parentNode.appendChild(CoolDrag.obj);<br><BR>} <br><BR>finded = true;<br><BR>break;<br><BR>} <br><BR>}<br><BR>}<br><BR>if(!finded){<br><BR>for(var i = 0; i < CoolDrag.container.childNodes.length; i++){<br><BR>var o = CoolDrag.container.childNodes[i];<br><BR>if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + <BR>o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)<br><BR>o.appendChild(CoolDrag.obj);<br><BR>}<br><BR>}<br><BR>with(CoolDrag.shadow.style){<br><BR>left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";<br><BR>top = (CoolDrag.cloneobj.offsetTop + 4) + "px";<br><BR>}<br><BR>//document.title = CoolDrag.cloneobj.style.left + "|" + <BR>CoolDrag.shadow.style.left;<br><BR>},<br><BR><br><BR>end:function(e){<br><BR>if(!CoolDrag.dragged)return;<br><BR>CoolDrag.obj.className = "dragLayer";<br><BR>CoolDrag.dragged = false;<br><BR>CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);<br><BR>CoolDrag.timer = CoolDrag.repos(150,15);<br><BR>//保存cookie<br><BR>var str="";<br><BR>for(var i=0; i<CoolDrag.container.childNodes.length; i++){<br><BR>var o = CoolDrag.container.childNodes[i];<br><BR>if(i>0)str += "|";<br><BR>str += o.id + ":";<br><BR>for(var j=0; j < o.childNodes.length; j++){<br><BR>if(j>0)str += ",";<br><BR>str += o.childNodes[j].id ;<br><BR>}<br><BR>}<br><BR>CoolDrag.save("cooldrag",str,24);<br><BR>},<br><BR>repos:function(aa,ab){<br><BR>//var f=CoolDrag.obj.filters.alpha.opacity;<br><BR>var tl=getRealLeft(CoolDrag.cloneobj);<br><BR>var tt=getRealTop(CoolDrag.cloneobj);<br><BR>var kl=(tl-getRealLeft(CoolDrag.obj))/ab;<br><BR>var kt=(tt-getRealTop(CoolDrag.obj))/ab;<br><BR>//var kf=f/ab;<br><BR>return setInterval(function(){if(ab<1){<br><BR>clearInterval(CoolDrag.timer);<br><BR>CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);<br><BR>CoolDrag.obj=null;<br><BR>return;<br><BR>}<br><BR>ab--;<br><BR>tl-=kl;<br><BR>tt-=kt;<br><BR>//f-=kf;<br><BR>CoolDrag.cloneobj.style.left=parseInt(tl)+"px";<br><BR>CoolDrag.cloneobj.style.top=parseInt(tt)+"px";<br><BR>//CoolDrag.tdiv.filters.alpha.opacity=f;<br><BR>}<br><BR>,aa/ab)<br><BR>},<br><BR>min:function(e){<br><BR>if(!e) e = window.event;<br><BR>var obj = getT(e);<br><BR>var rootObj = obj.parentNode.parentNode.parentNode;<br><BR>var id = rootObj.id;<br><BR>if(SavedObject.getStatus(id)[1]){ <br><BR>SavedObject.setStatus(id,0); <br><BR>rootObj.style.height = "20px";<br><BR>rootObj.childNodes[1].style.display = 'none'; <br><BR>}else{<br><BR>SavedObject.setStatus(id,1); <br><BR>rootObj.lastChild.style.display = ''; <br><BR>rootObj.style.height = SavedObject.getStatus(id)[2]; <br><BR>}<br><BR>obj.innerHTML = obj.innerHTML==0 ? 2 :0;<br><BR>},<br><BR>close:function(e){<br><BR>if(!e) e = window.event;<br><BR>var obj = getT(e);<br><BR>var rootObj = obj.parentNode.parentNode.parentNode;<br><BR>rootObj.parentNode.removeChild(rootObj);<br><BR>},<br><BR>save:function(name, value, hours){<br><BR>var expire = "";<br><BR>if(hours != null)<br><BR>{<br><BR>expire = new Date((new Date()).getTime() + hours * 3600000);<br><BR>expire = "; expires=" + expire.toGMTString();<br><BR>}<br><BR>document.cookie = name + "=" + escape(value) + expire;<br><BR>},<br><BR>read:function(name){<br><BR>var cookieValue = "";<br><BR>var search = name + "=";<br><BR>if(document.cookie.length > 0)<br><BR>{ <br><BR>offset = document.cookie.indexOf(search);<br><BR>if (offset != -1)<br><BR>{ <br><BR>offset += search.length;<br><BR>end = document.cookie.indexOf(";", offset);<br><BR>if (end == -1) end = document.cookie.length;<br><BR>cookieValue = unescape(document.cookie.substring(offset, end))<br><BR>}<br><BR>}<br><BR>return cookieValue;<br><BR>}<br><BR>}<br><BR>function $(id){<br><BR>return document.getElementById(id);<br><BR>}<br><BR>function getT(e){<br><BR>return e.target || e.srcElement;<br><BR>}<br><BR>function getMouseX(e){<br><BR>return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - <BR>document.body.clientLeft;<br><BR>}<br><BR>function getMouseY(e){<br><BR>return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - <BR>document.body.clientTop;<br><BR>}<br><BR>function getRealLeft(o){<br><BR>var l = 0;<br><BR>while(o){<br><BR>l += o.offsetLeft - o.scrollLeft;<br><BR>o = o.offsetParent;<br><BR>}<br><BR>return(l);<br><BR>}<br><BR>function getRealTop(o){<br><BR>var t = 0;<br><BR>while(o){<br><BR>t += o.offsetTop - o.scrollTop;<br><BR>o = o.offsetParent;<br><BR>}<br><BR>return(t);<br><BR>}<br><BR>function cleanWhitespace(node) {<br><BR>var notWhitespace = /\S/;<br><BR>for (var i=0; i < node.childNodes.length; i++) {<br><BR>var childNode = node.childNodes[i];<br><BR>if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {<br><BR>node.removeChild(node.childNodes[i]);<br><BR>i--;<br><BR>}<br><BR>if (childNode.nodeType == 1) {<br><BR>cleanWhitespace(childNode);<br><BR>}<br><BR>}<br><BR>}<br><BR>var SavedObject={<br><BR>elements : new Array(),<br><BR>setStatus : function(id,s){<br><BR>for(var i=0;i<SavedObject.elements.length;i++){<br><BR>if(SavedObject.elements[i][0]==id){<br><BR>SavedObject.elements[i][1]=s;<br><BR>break;<br><BR>}<br><BR>}<br><BR>},<br><BR>getStatus : function(id){<br><BR>for(var i=0;i<SavedObject.elements.length;i++){<br><BR>if(SavedObject.elements[i][0]==id)return SavedObject.elements[i];<br><BR>}<br><BR>},<br><BR>push : function(o){<br><BR>SavedObject.elements[SavedObject.elements.length]=o;<br><BR>}<br><BR>}<br><BR></script><br><BR></head><br><BR><body onLoad="CoolDrag.init('container');"><br><BR><br /><br><BR><div id="container"><br><BR><div id="leftcontainer"><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win1"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第一个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 1</div><br><BR></div><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win2"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第二个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 2</div><br><BR></div><br><BR></div><br><BR><div id="middlecontainer"><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win3"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第三个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 3</div><br><BR></div><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win4"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第四个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 4</div><br><BR></div><br><BR></div><br><BR><div id="rightcontainer"><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win5"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第五个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 5</div><br><BR></div><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win6"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第六个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 6</div><br><BR></div><br><BR><div style="height:100px; width:200px; " class="dragLayer" id="win7"><br><BR><div class="dragHeader"><br><BR><div style="float:left">第七个窗口</div><br><BR><div style="float:right; "><span class="min">0</span><span <BR>class="close">r</span></div><br><BR></div><br><BR><div class="content">window 7</div><br><BR></div><br><BR></div><br><BR></div><br><BR></body><br><BR></html></p><BR><BR>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
文章来自:
收藏到网摘:
Tags:
