Igoogle.com，三列，很多层，拖动层到另外一个位置，这个层就呆在那里了，保存后下次访问就是新的布局。
msn空间编辑模式也是这样的。
怎么实现，谁有代码啊？
<!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" /> <style type="text/css"> *{margin:0px; padding:0px;} body{position:relative; width:780px; height:800px; border:1px solid red} .drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff} .drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;} .center{ margin:200px; border:3px solid red} </style> <script type="text/javascript"></script> <title>popper.w' drag class - 中国asp之家</title> </head> <body> <div class="drag" > <h1><strong>popper.w'dragClass</strong></h1> </div> <div class="drag" > <h1>www.51js.com</h1> </div> <div class="drag" > <h1><strong>www.blueidea.com</strong></h1> </div> <div class="drag"><h1>www.aspxhome.com</h1></div> <div class="drag"><h1>中国asp之家</h1></div> <div class="drag"><h1>测试四</h1></div> <div class="drag"><h1>测试五</h1></div> </body> </html> <script type="text/javascript"> /* Author : popper.w Update : 2008-4-23 Version : v2.0 */ var DragZindexNumber=0; function drag(obj){ var ox,oy,ex,xy,tag=0,mask=0; if(tag==0){ obj.onmousedown=function(e) { if(mask==1){return; } obj.style.zIndex=DragZindexNumber++; transp(obj,"start") tag=1; var e = e||window.event; ex=getEventOffset(e).offsetX; ey=getEventOffset(e).offsetY; ox=parseInt(obj.offsetLeft); oy=parseInt(obj.offsetTop); tempDiv=document.createElement("div"); with(tempDiv.style) { width=obj.offsetWidth+"px"; height=obj.offsetHeight+"px"; border="1px dotted red"; position="absolute"; left=obj.offsetLeft+"px"; top=obj.offsetTop+"px"; zIndex=999; } document.body.appendChild(tempDiv); this.ele=tempDiv; fDragStart(tempDiv); document.body.onmousemove=function(e){ if(tag==1) { var e=e||window.event; tempDiv.style.left=parseInt(e.clientX)-ex+"px"; tempDiv.style.top=parseInt(e.clientY)-ey+"px"; } else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)} } tempDiv.onmouseup=function(e) { var e=e||window.event; fDragEnd(tempDiv); obj.style.position="absolute"; movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20); tempDiv.parentNode.removeChild(tempDiv); tag=0; } } } } function movie(o,l,t){ var a=1; mask=1; var ol=parseInt(o.offsetLeft); var ot=parseInt(o.offsetTop); var iTimer=setInterval(function(){ if(a==10) { transp(o,"end"); mask=0; clearInterval(iTimer); } o.style.left=ol+a*(l-ol)/10+"px"; o.style.top=ot+a*(t-ot)/10+"px"; a++; },20); } function fCancleBubble(e) { var e = window.event || e; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } function transp(o,mode){ if(mode=="start"){ if(document.all){ o.style.filter = "Alpha(Opacity=50)"; }else{ o.style.opacity = 0.5; } } else { if(document.all){ o.style.filter = "Alpha(Opacity=100)"; }else{ o.style.opacity = 1; } } } function getOffset(evt) { var target = evt.target; if (target.offsetLeft == undefined) { target = target.parentNode; } var pageCoord = getPageCoord(target); var eventCoord = { x: window.pageXOffset + evt.clientX, y: window.pageYOffset + evt.clientY }; var offset = { offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; return offset; } function getPageCoord(element) { var coord = {x: 0, y: 0}; while (element) { coord.x += element.offsetLeft; coord.y += element.offsetTop; element = element.offsetParent; } return coord; } function getEventOffset(evt) { var msg = ""; if (evt.offsetX == undefined) { var evtOffsets = getOffset(evt); msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; } else { msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; } return msg; } function fDragStart(XEle) { switch(fCkBrs()) { case 3: window.getSelection().removeAllRanges(); break; default: XEle.setCapture(); break; } } function fDragEnd(XEle) { switch(fCkBrs()) { case 3: window.getSelection().removeAllRanges(); break; default: XEle.releaseCapture(); break; } } function fCkBrs() { switch (navigator.appName) { case 'Opera': return 2; case 'Netscape': return 3; default: return 1; } } var element=document.getElementsByTagName("div"); for(var i=0;i<element.length;i++){ if(element[i].className=="drag"){ drag(element[i])} } </script> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...