可定制页面实现

Question

页面中显示几块数据集，或功能集，用户可以定制每块集合，或者拖拽数据集在页面上展现的位置，后台如何设计，页面怎么实现，望高手不吝赐教！

Answer 1

我只知道ASP里面可以设置模板页  在自己其他编写的页面套用模板即可  JSP定制   没玩过

Answer 2

定制功能可以用1楼说的模板页动态呈现；
拖曳布局需要ajax，给你点仿google个性化拖动的js代码    
     //根据类型获取Elements
     function getElementsByClassName(className,tagName) 
     { 
        var el = [],
            _el = document.getElementsByTagName(tagName);
        for (var i=0; i<_el.length; i++ ) 
        {
            if (_el[i].className ==  className) 
            {
                el[el.length] = _el[i];
            }
        };
        return el;
    }    //获得元素位置索引
    function getElementLocation(ele)
    {
        var loc = 1;
        if(ele)
        {
            for(var i=0; i<ele.parentNode.children.length; i++ ) 
            {
                if (ele.parentNode.children[i].id == ele.id ) 
                {
                    loc = i;
                    break;
                }
            }
        }
        return loc;
    }
    
     var edit = false;
     //存放容器
     var parentTable = null; 
     //位置顺序
     var EleOrder = 0;
     var hydiv=null;
     var tdiv=null;
     var ao = null;
     
      //取得坐标
    function getInfo(o)
    {
         var to=new Object();
         if(o)
         {
             to.left=to.right=to.top=to.bottom=0;
             var twidth=o.offsetWidth;
             var theight=o.offsetHeight;
             while(o!=document.body){
              to.left+=o.offsetLeft;
              to.top+=o.offsetTop;
              if(o.offsetParent.tagName && o.offsetParent.tagName=='HTML')
                o=o.parentElement;
              else
                o=o.offsetParent;
             }
              to.right=to.left+twidth;
              if(o.style.marginTop)
                to.bottom=parseInt(to.top)+parseInt(theight)+parseInt(o.style.marginTop);
              else 
                to.bottom=parseInt(to.top)+theight;
         }
         return to;
    }
    
    //缓慢滑入、滑出效果，用于恢复位置
    function ff(aa,ab)
    {
         var ac=parseInt(getInfo(tdiv).left);
         var ad=parseInt(getInfo(tdiv).top);
         var ae=(ac-getInfo(ao).left)/ab;
         var af=(ad-getInfo(ao).top)/ab;
         return setInterval(function(){if(ab<1){
               clearInterval(mm);
               tdiv.style.display="none";
//               obj.removeNode(true);
               tdiv.parentNode.removeChild(tdiv)
               tdiv = null;
               ao=null;
               return
              }
             ab--;
             ac-=ae;
             ad-=af;
             if(tdiv)
             {
                 tdiv.style.left=parseInt(ac)+'px';
                 tdiv.style.top=parseInt(ad)+'px'
             }
            }
        ,aa/ab)
    }    function Drag(event)
    {
        this.dragStart = dragStart;
        this.onDrag = draging;
        this.dragEnd= dragEnd;
    }
    
    function dragStart(event)
    {
         ao = event.srcElement;         if((ao.tagName=='TD')||(ao.tagName=='TR'))
            ao=ao.offsetParent;
         else 
            return;
       
       ao.rows[0].className='dragTR';
       ao.rows[0].style.display='';
            
         var tmp = getInfo(ao);
          
         //虚线框
         if(hydiv)
         {
            hydiv.style.display="none";
            if(hydiv.parentNode)
                hydiv.parentNode.removeChild(hydiv)
         }
         hydiv=document.createElement("div");
//         hydiv.style.borderTop='1px dotted';
         hydiv.style.border='2px dashed #3366cc';
         hydiv.style.backgroundColor="White";
         hydiv.style.display="block";
         hydiv.style.position="absolute";
         if (ao.clientWidth)  
         {
            hydiv.style.width = ao.clientWidth + "px";
            hydiv.style.height = ao.clientHeight + "px";
         }
         hydiv.style.left=tmp.left;
         hydiv.style.top=tmp.top;
         hydiv.innerText = " ";
         document.body.appendChild(hydiv);
         
         if(tdiv)
         {
            tdiv.style.display="none";
            window.status = tdiv.outerHTML;
            if(tdiv.parentNode)
                tdiv.parentNode.removeChild(tdiv)
         }
         tdiv=document.createElement('div');
         tdiv.innerHTML=ao.outerHTML;
//         tdiv.innerHTML = "<table class='dragTable' width='150' border='1' cellspacing='0'> <tr class='dragTR'><td align='right'><input type='submit'  value='关闭' />  <input value='折叠' type='button' />  <input value='修改' type='button' /></td></tr><tr><td>拖动模块</td></tr></table>";
         tdiv.style.display='block';
         tdiv.style.position='absolute';
         tdiv.style.cursor='move';
         window.status = tmp.top + "," + top.left;
         tdiv.style.width=ao.offsetWidth;
         tdiv.style.height=ao.offsetHeight;
         if(tmp.top)
             tdiv.style.top=tmp.top;
         if(tmp.left)
             tdiv.style.left=tmp.left;
         document.body.appendChild(tdiv);
         
         this.lastX=event.clientX;
         this.lastY=event.clientY;
         this.lastLeft=tmp.left;
         this.lastTop=tmp.top;         this.draged = true;
    }
    
    function draging(event)
    {
     //重要:判断MOUSE的位置
     if(ao == null || !this.draged)
        return;
     var tX=event.clientX;
     var tY=event.clientY;
     //加上MarginTop的值
     var bodyMarginTop = parseInt(document.body.style.marginTop);
     if(bodyMarginTop > 0)
        tY += bodyMarginTop;
     if(tdiv)
     {
         tdiv.style.left=parseInt(this.lastLeft)+tX-this.lastX;
         tdiv.style.top=parseInt(this.lastTop)+tY-this.lastY;
         tdiv.style.filter='alpha(opacity=50)';
     }
        for(var r=0;r<parentTable.rows.length;r++){
          for(var i=0;i<parentTable.rows[r].cells.length;i++){
          var parentCell=getInfo(parentTable.rows[r].cells[i]);
          if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
           var subTables=parentTable.rows[r].cells[i].getElementsByTagName('table');
           if(subTables.length==0){
            if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
             parentTable.rows[r].cells[i].appendChild(ao);
            }
            break;
           }
           for(var j=0;j<subTables.length;j++){
            var subTable=getInfo(subTables[j]);           if(subTables[j].clientWidth>0)
            {
    //插入虚线框
    hydiv.style.left=subTable.left;
    hydiv.style.top=subTable.top;
    hydiv.style.width=subTables[j].clientWidth;
    }
            
            if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
             parentTable.rows[r].cells[i].insertBefore(ao,subTables[j]);
             break;
            }else{
             parentTable.rows[r].cells[i].appendChild(ao);
            } 
           }
          } 
         }
        }
     }
     
     function dragEnd(event)
    {
          if(this.draged) 
         {
             this.draged = false;             
             ao.zoneIndex = EleOrder;
             ao.zone = ao.parentNode.id.replace("td","");
             mm=ff(150,15);                
         }
        if(hydiv)
        {
           hydiv.style.display="none";
           if(hydiv.parentNode)
               hydiv.parentNode.removeChild(hydiv)
        }
        if(parentTable)
        {
            for(var m = 0;m<parentTable.length;m++)
            {
                CheckBlankTD(parentTable[m]);
            }
        }
        var ctlid;
        if(ao)
        {
            EleOrder = getElementLocation(ao);
            if(ao.parentNode)
                ctlid = ao.id + ',' + ao.parentNode.id + ',' + EleOrder;
            if(ao.zoneIndex != EleOrder || "td" + ao.zone != ao.parentNode.id)
            {
                ChangeServerLayout(ctlid);
            }
         }
    }
        
     //给没有内容的td设置高度
     function CheckBlankTD(tbl)
     {
         for(var i=0;i<tbl.cells.length;i++)
         {
            var tdBlank = tbl.cells[i];
            if(tdBlank)
            {
                if(tdBlank.style.height<50)
                    tdBlank.style.height=50;
            }
         }
      }