请教一个网页模块拖拽,后台保存的问题

Question

现在的百度空间,QQ空间,IGOOGLE等等, 都可以拖拽自己主页的模块,让用户可以定制自己主页的样式.....
假如现在我页面上有三个模块A(位于左边),B(位于中间),C(位于右边).....
那么我现在将ABC的位置互换一下, 请问我该怎么保存ABC的位置(当然模块可以添加N个......)?

Answer 1

[code=JScript]<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;
   },
   getEvent:function(){
     return window.event||arguments.callee.caller.arguments[0];
   },
   start:function(){
      //if (!e) e=window.event;
      var e=CoolDrag.getEvent();
      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";
      }
      //这个是阴影,也随拖动对象一直动,但向右了4px,zIndex也小一点.
      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;
         e=CoolDrag.getEvent();
      }
      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(){
      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;
         e=CoolDrag.getEvent();
      }
      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){
         var offset=document.cookie.indexOf(search);
         if (offset!=-1){
            offset+=search.length;
            var end=document.cookie.indexOf(";",offset);
            if (end==-1){
               end=document.cookie.length;
            }
            cookieValue=unescape(document.cookie.substring(offset,end));
         }
      }
      return cookieValue;
   }
};function $(id){
   if (typeof id=='string'){
      return document.getElementById(id);
   }
   return false;
}function getT(e){
   //获取鼠标当前作用对象.FF(target)和IE
   return e.target||e.srcElement;
}function getMouseX(e){
   return e.pageX?e.pageX:e.clientX+document.body.scrollLeft-document.body.clientLeft;
}

Answer 2

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>[/code]
<body onLoad="CoolDrag.init('container');">
<br/><div id="container">
   <div id="leftcontainer">
      <div style="height:150px; width:300px; " class="dragLayer" id="win1">
         <div class="dragHeader">
            <div style="float:left">第一个窗口</div>
            <div style="float:right; "><span class="min">小/</span><span class="close">关</span></div>
         </div>
         <div class="content">window 1</div>
      </div>
      <div style="height:150px; width:300px;" class="dragLayer" id="win2">
         <div class="dragHeader">
            <div style="float:left">第二个窗口</div>
            <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
         </div>
         <div class="content">window 2</div>
      </div>
   </div>
   <div id="middlecontainer">
      <div style="height:150px; width:300px;" class="dragLayer" id="win3">
         <div class="dragHeader">
            <div style="float:left">第三个窗口</div>
            <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
         </div>
         <div class="content">window 3</div>
      </div>
      <div style="height:150px; width:300px;" class="dragLayer" id="win4">
         <div class="dragHeader">
            <div style="float:left">第四个窗口</div>
            <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
         </div>
         <div class="content">window 4</div>
      </div>
   </div>
</div>
</body>

Answer 3

<style type="text/css">
   body {
      background-color: #36393D;
      font-size: 12px;
      margin: 0;
   }   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: 2px 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;
      cursor: move;
   }   DIV.dragHeader_over {
      width: 100%;
      height: 20px;
      line-height: 20px;
      background-color: #C79810;
   }   SPAN.min, SPAN.close {
      cursor: pointer;
      font-family: Webdings,serif;
   }   #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>

Answer 4

你运行过没有？打开一次，拖动后再打开一次，看看。
这里是cookie,不懂得举一反三，无语。

Answer 5

点保存之后，把对应的模块ID及左上角座标存入数据库即可。
哦  
LS这个方法感觉可行学习了

Answer 6

  那数据库岂不是要多出很多脏数据么。
  如果有人一天拖个上百遍，那你玩了。。
  感觉应该放Cookie或当前缓存里比较合适
-------------------------------------------------------------
这应该属于Ajax技术。。
  类型Google地图模式的
   没做过
     就算是友情UP一下吧
       

Answer 7

把可拖拽的模块做进div，写上几个js方法，使其在客户按住鼠标左键不放时可以获取鼠标移动坐标，不断根据鼠标移动的轨迹来改变div的top\left，最后提示客户保存，趁机从后台拿到这几个div的坐标，再之后是存数据库还是写cookie看楼主如何方便了。