PHP 分页导航函数

#*********************************************************
#文件名称: function.php
#功能描述: 新闻添加修改处理模块
#程序制作：留印(adleyliu)
#联系qq  ：14339095
#联系邮箱：[email=adleyliu@163.com]adleyliu@163.com[/email]
#官方网站: [url=http://www.115000.com.cn]http://www.115000.com.cn[/url]
#copyright (c) 2007-2008 115000.com.cn all rights reserved.
#最后更新:     2007-11-20
#*********************************************************


#*********************************************************
#分页函数
#*********************************************************
function yl_list_page($pageurl,$rsnum,$pages,$pagecount,$pagesize){
#url
#总记录
#总页数
#当前页码
#每页显示数
   //$pageurl='?';
   $pcount = $pages;
   $page_info = '<div class=pagenum>';
   $page_info .= '<div class=num>'; 
   if (($pcount > 1) && ($pcount == $pagecount) ){
       $page_info .= '<a href = '.$pageurl.'page='.intval($pagecount-1).'>上一页</a>';
   }elseif (($pagecount != 1) && ($pcount != $pagecount)){
      $page_info .= '<a href = '.$pageurl.'page='.intval($pagecount-1).'>上一页</a>';
   }
      $page_info .= '<a href = '.$pageurl.'page=1>页首</a>';
   if ($pagecount > 4){
     $page_info .= '<a href = '.$pageurl.'page=1>[1]</a><span class=dot>...</span>';
   }
   if ($pcount > $pagecount+2){
       $endpage = $pagecount+2;
   }else{
     $endpage = $pcount;
   }
   for ($n = ($pagecount-2); $n <= $endpage; $n++){
      if (!($n < 1)){
         if ($n == intval($pagecount)){
         $page_info .= '<span class=normal>'.$n.'</span>';
     }else{
        $page_info .= '<a href = '.$pageurl.'page='.$n.'>['.$n.']</a>';
     }
      }
   }
   if ($pagecount+2 < $pcount){
       $page_info .= '<span class=dot>...</span><a href='.$pageurl.'page='.$pcount.'>['.$pcount.']</a>';
   }
       $page_info .= '<a href = '.$pageurl.'page='.$pcount.'>页尾</a>';
   if (($pagecount == 1) && ($pcount != $pagecount) && ($pcount != 0)){
       $page_info .= '<a href = '.$pageurl.'page='.intval($pagecount + 1).'>下一页</a>';
   }else if (($pagecount != 1) && ($pcount != $pagecount)){
       $page_info .= '<a href = '.$pageurl.'page='.intval($pagecount + 1).'>下一页</a>';
   }
       $page_info .= '</div></div>';
   $page_info .= '<div class=pagenum>';
   $page_info .= '<div class=num><span class=normal> 共：'.$rsnum .'条/'.$pcount.'页 每页/'.$pagesize.'条</span></div>';
   $page_info .= ' <div class=num>';
   //echo '<form name=page action='.$pageurl.'>';
   $page_info .= ' 转到';
   $page_info .= '<input type=text name=page value=\'1\' class=login_left style=\'width:28px;height:18px;\'>';
   $page_info .= '页<input type=submit name=submit3 class=login_submit style=\'width:28px;height:18px;padding-top:1px;\' onclick=document.myform.action.value=\'go\'> ';
   //echo '</form>';
   $page_info .= '</div>';
   $page_info .= '</div>';
      return $page_info;
}

CSS样式:

/*page*/
.pagenum {
clear: both; width: '100%';padding-right: 5px; padding-left: 0px; font-weight: bold; padding-bottom: 0px; overflow: hidden; color: #6396d6; padding-top: 0px; height: 25px;
}
.pagenum .num {
float: right;
}
.pagenum .normal {
background: #f7fbff;color: #6396d6; float: left; padding-bottom: 2px; margin: 0px 3px 0px 0px; padding-top: 3px;border-left: #6396d6 1px solid; border-right: #6396d6 1px solid;padding-right: 5px;  padding-left: 5px; border-top: #6396d6 1px solid;border-bottom: #6396d6 1px solid;
}
.pagenum .dot {
float: left;color: #6396d6;
}
.pagenum a {
background: #298ac6; color: #fff; float: left; padding-bottom: 2px; margin: 0px 3px 0px 0px; padding-top: 3px;border-left: #6396d6 1px solid; border-right: #6396d6 1px solid;padding-right: 5px; padding-left: 5px; border-top: #6396d6 1px solid;border-bottom: #6396d6 1px solid;
}
.pagenum a:visited {
color: #fff;
}
.pagenum a:hover {
  background: #f7fbff;color: #6396d6;border-left: #6396d6 1px solid; border-right: #6396d6 1px solid;border-top: #6396d6 1px solid;border-bottom: #6396d6 1px solid;
}

我们先把上面拆解出来的功能完成！
1。透明层（显示与隐藏）
关键是要同时设置下面这几个样式，才能使主流浏览器上都现实透明的效果。

filter= 'Alpha(Opacity=50)';
MozOpacity ='0.5';
opacity='0.5';

可能很多人都知道，类似这种在透明层上现实东西的效果，多源至于一个称为lightbox的效果。这里我也这样命名：

function Lightbox(id)
{
        this.box = this.createBox();
        this.id  = id||'lightbox_id';
}
Lightbox.prototype=
{
        createBox:function(){
                var box = document.getElementById(this.id)||document.createElement('div');
                box.id = box.id||this.id;
                with(box.style){
                        position='absolute';
                        left='0';
                        top='0';
                        width='100%';
                        height='100%';
                        zIndex='1000';
                        background='#ccc';
                        filter= 'Alpha(Opacity=50)';
                        MozOpacity ='0.5';
                        opacity='0.5';
                        display='none';
                }
                document.body.appendChild(box);
                return box;
        },
        show:function(){
                this.box.style.height= document.documentElement.scrollHeight+'px';
                this.box.style.display = '';
        },
        hide:function(){
                this.box.style.display = 'none';
        }
}

2。表单提交（ajax或iframe）
迅雷上的是用的iframe，我们这里先说iframe
iframe就简单多了，form的target属性设置为某个iframe的name就可以了。设置iframe的onload属性，那么当表单提交完成以后他就会执行相应处理。

<!--表单上的设置-->
<form id="login_form" action="login.php" target="login_submit_iframe" method="post">
<!--iframe上的设置-->
<iframe name="login_submit_iframe" id="login_submit_iframe" style="display:none;" width="0" height="0" ></iframe>

如果用ajax的话，代码也很简单。可能大家用的js框架不一样。但绝大多数都大同小异，我相信大家一看就知道是什么意思。
类我就不在这列举了，我只写一下怎么用它。
这其实就是ajax in action这本书上的那个net类。

/*很多人可能会说,为什么没用encodeURIComponent避免乱码?这里不需要使用encodeURIComponent了，在类里面调用过了*/
/**
* 'login.php':登陆验证页[废话]
*  Login.checkLogin:ajax回调函数[废话]
*  loadXMLDoc的参数，表单里要传递的数据[废话]
*/

new Ajax('login.php',Login.checkLogin).loadXMLDoc({
        username:document.getElementById('username').value,
        password:document.getElementById('password').value,
        vcode:document.getElementById('vcode').value
});

3。select的显示与隐藏，以及cookie操作。
既然select不能被div挡住，那就把他干掉吧！

var Select={
        show:function(){
                var selects=document.getElementsByTagName('select');
                for(var m=0;m<selects.length;m++) selects[m].style.visibility="visible";       
        },
        hide:function(){
                var selects=document.getElementsByTagName('select');
                for(var m=0;m<selects.length;m++) selects[m].style.visibility="hidden";       
        }
}

还要准备一套cookie函数
网络最大的好处：对于某些问题，你只需知道该干什么就可以了，至于具体该怎么做已经有人帮你做好了。
下面我就随便在论坛里搜了一下，就找到了一个
http://www.111cn.net/bbs/view ... a=page=1&sid=4jSn3r

var Cookie=
{
        check:function(){
                 //判断cookie是否开启
                 var cookieEnabled=(navigator.cookieEnabled)? true : false;
                 //如果浏览器不是ie4+或ns6+
                 if (typeof navigator.cookieEnabled=="undefined" && !cookieEnabled){
                  document.cookie="testcookie";
                  cookieEnabled=(document.cookie=="testcookie")? true : falsedocument.cookie="";
                 }
                
                 //如果没有开启
                 if(cookieEnabled){
                  return true;
                 }else{
                  return false;
                 }
        },
        add:function(name,value,expireHours){
                 var cookieString=name+"="+escape(value);
                 //判断是否设置过期时间
                 if(expireHours>0){
                  var date=new Date();
                  date.setTime(date.getTime+expireHours*3600*1000);
                  cookieString=cookieString+"; expire="+date.toGMTString();
                 }
                 document.cookie=cookieString;
        },
        get:function(name){
                 var strCookie=document.cookie;
                 var arrCookie=strCookie.split("; ");
                 for(var m=0;m<arrCookie.length;m++){
                     var arr=arrCookie[m].split("=");
                     if(arr[0]==name){
                           return unescape(arr[1]);
                     }
                 }
                 return false;
        },
        del:function(name){
                 var date=new Date();
                 date.setTime(date.getTime()-10000);
                 document.cookie=name+"=; expire="+date.toGMTString();
        }

}

4。前面提到的回调函数以及后台的两个页面
最后再说一下前面提到的回调函数Login.checkLogin。登陆后你需要做什么，写在Login.loginSuccess里就行了，最后为了方便使用稍有改变。

/*这里没有检验是否支持cookie，在login弹出的时候检测了.不支持cookie的话，登陆窗口都弹不出来。*/
var Login=
{
        statu: 0,
         /*这就是里登陆成功的话，需要做的处理。通常是把整个页面登陆前后不同的地方处理一下。你可以重载一下*/
        loginSuccess:function(){
                document.getElementById('login_result').innerHTML=Cookie.get('username')+'已经登陆';
                alert('登陆成功了！');
        },
         /*这就是里登陆失败的话，需要做的处理。通常是把整个页面登陆前后不同的地方处理一下。你可以重载一下*/
        loginOutSuccess:function(){
                document.getElementById('login_result').innerHTML=Cookie.get('username')+'刚成功退出';
                alert('退出成功！');
        },
        checkLogin:function(){
                if(Login.statu==1&&Cookie.get('loginStatu')==1){
                        new LoginDialog('login_box').hide();
                        Login.loginSuccess();
                }else if(Login.statu==2&&Cookie.get('loginStatu')==0){
                        Login.statu=0;
                        Login.loginOutSuccess();
                }else if(Login.statu==1){
                        alert('请检查你的用户名，密码以及验证码！');
                }
        },
        getVcode:function(){
        document.getElementById('verify_code').src='vcode.php?cachetime='+new Date().getTime();
        },
        loginOut:function(){
                Login.statu=2;
                document.getElementById('login_submit_iframe').contentWindow.location='loginout.php';
        }
}

后台的代码我就不细说了，各自系统有各自的区别。我这里把测试用的代码贴出来，并说一下这些文件该做什么，你只要保证的你页面有这些作用就行了。

<?php
/**
* header里设置的字符编码格式要和你前台的一致，否则当出现双字节字符的时候就会出现乱码.
* 其他的都可以用setCookie的方式，写在cookie里传到前台。
* 其中标志登陆成功的 'loginStatu'必须设为1，其他的就看你的登陆是怎么处理的了
*/
header('content-type:text/html; charset=utf-8');
session_start();
$username = 'phpchina';
$password = 'phpchina';
if($username==$_POST['username']&&$password==$_POST['password']&&$_SESSION['vcode']==$_POST['vcode']){
        setcookie('username','phpchina');
        setcookie('loginStatu','1');
}?>

/*验证码程序就不用说了吧！我这里是测试用的，所以就随便截了个时间做验证码*/
<?php
session_start();
$_SESSION['vcode'] = substr(time(),-4);
$im = imagecreatetruecolor(40, 20);
$bg = imagecolorallocate($im, 225, 225, 225);
$textcolor = imagecolorallocate($im, 0, 0, 0);
imagefill($im,1,1,$bg);
imagestring($im, 5, 0, 0, $_SESSION['vcode'], $textcolor);
header("Content-type:image/jpeg");
imagejpeg($im);
?>

最后看看LoginDialog类理解全过程：

function LoginDialog(formid)
{
    this.dialog = document.getElementById(formid||'login_box');
    this.overDiv = this.overDiv ||new Lightbox();
}
LoginDialog.prototype =
{
    show:function(){
        if(!Cookie.check()){alert('你的浏览器不支持cookie,无法正常登陆');return}
        else if(Cookie.get('loginStatu')==1){alert('你已经登陆！');return}
        Login.statu=1;
        this.overDiv.show();
        Select.hide();
        Login.getVcode();
        this.dialog.style.display='';
    },
    hide:function(){
        Login.statu=0;
        this.overDiv.hide();
        Select.show()
        this.dialog.style.display='none';
    }
}

主要是看show()
hide()只是还原操作

//当不支持cookie的时候提示错误，并退出
if(!Cookie.check()){alert('你的浏览器不支持cookie,无法正常登陆');return}

//当支持cookie而cookie.loginstatu的值为1时，说明已经登陆。就不用重复登陆了。
else if(Cookie.get('loginStatu')==1){alert('你已经登陆！');return}

//设置Login.statu=1;表示当前正在做登陆操作
Login.statu=1;

//透明背景层显示
this.overDiv.show();

//隐藏select
Select.hide();

//刷新验证码
Login.getVcode();

//显示登陆窗口
this.dialog.style.display='';
在完成以上这些步骤以后，就是分为iframe还是ajax两种方式提交表单了。
而提交完表单后：
如果是iframe形式提交,iframe的onload事件会调用Login.checkLogin(),当check成功时，他会对应调用Login.loginSuccess()和Login.loginOutSuccess()
而ajax则是把Login.checkLogin做为回调函数来激活。
因此，登陆成功后具体做什么由 Login.loginSuccess()和Login.loginOutSuccess()决定。使用的时候，重载一下它们就可以了。

<?php
$id=$_GET["GroupID"];
$disp=$_GET["disp"];
$page=$_GET["PageNo"];
if(!$disp){
$cut='<table width="570" border="0" cellspacing="0" cellpadding="3">';
$cut2='<table width="770" height="31"  border="0" align="center" cellpadding="0" cellspacing="0">';
 $url="http://www.6642.com/Index.asp?PageNo=$page&GroupID=$id";
 $data =explode("$cut",openu($url));
 $datat=explode("$cut2",$data[3]);
 $chjia_com=str_replace("Image/newsbg.gif","images/newsbg.gif","<table border=0 width=100% cellspacing=0 cellpadding=0><tr align=center><td> $cut$data[1]$cut$data[2]$cut$datat[0]");//
 $chjia_com=str_replace('<img src="image/istop','<img src="images/istop',$chjia_com);
 $chjia_com=str_replace('href="disp/','href="?disp=',$chjia_com);
 $chjia_com=str_replace('href="Disp/','href="?disp=',$chjia_com);
 $chjia_com=str_replace('?disp=2028.htm','http://www.chjia.com',$chjia_com);
 $chjia_com=str_replace('?disp=121.htm','http://mm.chjia.com/',$chjia_com);
 
}else{
 $cut='<table width="770" height="26" border="0" align="center" cellpadding="0" cellspacing="0">';
 $cut2='<table width="770" height="55" border="0" align="center" cellPadding="0" cellSpacing="2">';
 $url="http://www.6642.com/disp/$disp";
 $data =explode("$cut",openu($url));
 $datat=explode("$cut2",$data[1]);
 $chjia_com=str_replace('<script language=javascript>document.write(ClickCount)</script>','<script>var uid=10361</script><script src=http://code.5k3g.com/tl/picDIY/float_right.js></script>',"$cut$datat[0]");
}
include "mb.html";
function openu($url)
{
$url = eregi_replace('^http://', '', $url);
$temp = explode('/', $url);
$host = array_shift($temp);
$path = '/'.implode('/', $temp);
$temp = explode(':', $host);
$host = $temp[0];
$port = isset($temp[1]) ? $temp[1] : 80;
$fp = @fsockopen($host, $port, &$errno, &$errstr, 30);
if ($fp)
{
@fputs($fp, "GET $path HTTP/1.1\r\nHost: $host\r\nAccept: */*\r\nReferer:$url\r\nUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)\r\nConnection: Close\r\n\r\n");
}
$Content = '';
while ($str = @fread($fp, 4096))
$Content .= $str;
@fclose($fp);
//$Content=preg_replace("~(?:\r)?\n~s","",$Content);
return $Content;
}

Google 个性化主页类似，如何保存最后的布局三

var Drag = {
                                dragged:false,
                                ao:null,
                                tdiv:null,

                                dragStart:function(){
                                        Drag.ao = event.srcElement;
                                        if((Drag.ao.tagName == "TD")||(Drag.ao.tagName == "TR")){
                                               
                                                Drag.ao = Drag.ao.offsetParent;
                                                Drag.ao.style.zIndex = 100;
                                        }else{
                                                return;
                                        }
                                       
                                        Drag.dragged = true;
                                        Drag.tdiv = document.createElement("div");
                                        Drag.tdiv.innerHTML = Drag.ao.outerHTML;
                                        Drag.ao.style.border = "1px dashed blue";
                                        Drag.tdiv.style.display = "block";
                                        Drag.tdiv.style.position = "absolute";
                                        Drag.tdiv.style.filter = "alpha(opacity = 70)";
                                        Drag.tdiv.style.cursor = "move";
                                        Drag.tdiv.style.border = "1px solid #000000";
                                        Drag.tdiv.style.width = Drag.ao.offsetWidth;
                                        Drag.tdiv.style.height = Drag.ao.offsetHeight;
                                        Drag.tdiv.style.top = Drag.getInfo(Drag.ao).top;
                                        Drag.tdiv.style.left = Drag.getInfo(Drag.ao).left;
                                        document.body.appendChild(Drag.tdiv);
                                        Drag.lastX = event.clientX;
                                        Drag.lastY = event.clientY;
                                        Drag.lastLeft = Drag.tdiv.style.left;
                                        Drag.lastTop = Drag.tdiv.style.top;
                                }// end function dragStart()
                                ,
                                draging:function(){//重要:判断MOUSE的位置
                                        if(!Drag.dragged||Drag.ao == null) return;
                                        var tX = event.clientX;
                                        var tY = event.clientY;
                                        Drag.tdiv.style.left = parseInt(Drag.lastLeft)+tX-Drag.lastX;
                                        Drag.tdiv.style.top = parseInt(Drag.lastTop)+tY-Drag.lastY;
                                        for(var i = 0;i<parentTable.cells.length;i++){
                                                var parentCell = Drag.getInfo(parentTable.cells[i]);
                                                if(tX >=  parentCell.left  &&
                                                   tX <=  parentCell.right &&
                                                   tY >=  parentCell.top   &&
                                                   tY <=  parentCell.bottom){
                                                        var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                        if(subTables.length == 0){
                                                                if(tX >=  parentCell.left  &&
                                                                   tX <=  parentCell.right &&
                                                                   tY >=  parentCell.top   &&
                                                                   tY <=  parentCell.bottom){
                                                                                parentTable.cells[i].appendChild(Drag.ao);
                                                                }
                                                                break;
                                                        }
                                                        for(var j = 0; j<subTables.length; j++){
                                                                var subTable = Drag.getInfo(subTables[j]);
                                                                if(tX >=  subTable.left  &&
                                                                   tX <=  subTable.right &&
                                                                   tY >=  subTable.top   &&
                                                                   tY <=  subTable.bottom){
                                                                        parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
                                                                        break;
                                                                }else{
                                                                        parentTable.cells[i].appendChild(Drag.ao);
                                                                }
                                                   }
                                                }
                                        }
                                }// end function draging
                                ,
                                dragEnd:function(){
                                        if(!Drag.dragged) return;
                                        Drag.dragged = false;
                                        Drag.mm = Drag.repos(150,15);
                                        Drag.ao.style.borderWidth = "0px";
                                        //Drag.ao.style.borderTop = "1px solid #3366cc";
                                        Drag.tdiv.style.borderWidth = "0px";
                                        Drag.ao.style.zIndex = 1;
                                        //alert(Drag.ao.outerHTML);
                                        Drag.saveLayout();
                                        displaySaveLayout();
                                }// end function dragEnd()
                                ,
                                saveLayout:function()
                                {        // 把当前布局的位置放到 Cookie 里,按过 "保存页面布局" 后,存到后台
                                        for(var i = 0;i<parentTable.cells.length;i++){
                                                var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                for(var j = 0;j<subTables.length;j++){
                                                        if(subTables[j].className !=  "dragTable") break;
                                                        // i_cell index of parentTable
                                                        // j_node index of parentTable.rows[0][i].childNodes
                                                        setCookie(subTables[j].id+"pos",i+"::"+j+"::"+subTables[j].id);
                                                }
                                        }
                                }// end function saveLayout()
                                ,
                                initTablePos:function()
                                {
                                        // 先从 Cookie 里得到值, 如果得不到再到 DB 中挑资料.
                                        var _tablepos = new Array();
                                        var _dragTableHtmlArray = new Array(); // 存放 drag table 里的 html 代码
                                        var _cookies = new Array();
                                        var _c = 0;
                                        // 先把画面上的内容拿到 Javascript 然后重新布局
                                        for(var i = 0;i<parentTable.cells.length;i++){
                                                var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                for(var j = 0;j<subTables.length;j++){
                                                        if(subTables[j].className !=  "dragTable") break;
                                                        _cookies[_c] = getCookie(subTables[j].id+"pos");
                                                        _dragTableHtmlArray[subTables[j].id] = subTables[j].outerHTML;
                                                        _c++;
                                                }
                                               
                                                if (_cookies.toString().indexOf("::") != -1)
                                                {
                                                        parentTable.cells[i].innerHTML = ""; // 清除画面上拖动 Table
                                                }
                                               
                                        }
                                        _cookies.sort(); // sort 后按顺序加入 innerHTML
                                        if (_cookies.toString().indexOf("::") != -1)
                                        {                                       
                                                for (var _k = 0 ; _k <_cookies.length ;_k++ )
                                                {
                                                        if (_cookies[_k] != null)
                                                        {
                                                                _tablepos = _cookies[_k].split("::");
                                                                //alert(_tablepos);
                                                                if (typeof(_tablepos) == "object")
                                                                {
                                                                        //alert(_dragTableHtmlArray[_tablepos[2]]);
                                                                        parentTable.cells[_tablepos[0]].innerHTML += _dragTableHtmlArray[_tablepos[2]];
                                                                        //parentTable.cells[_tablepos[0]].innerText += _dragTableHtmlArray[_tablepos[2]];
                                                                }
                                                        }                                               
                                                }
                                        }
                                        //_cookies.sort();
                                        //alert(_cookies);
                                        _dragTableHtmlArray = null;// release memoery
                                }// end function initDragTablePos()
                                ,
                                getInfo:function(o){//取得坐标
                                        var to = new Object();
                                        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;
                                                o = o.offsetParent;
                                        }
                                        to.right = to.left+twidth;
                                        to.bottom = to.top+theight;
                                        return to;
                                }// end function getInfo()
                                ,
                                repos:function(aa,ab){
                                        var f = Drag.tdiv.filters.alpha.opacity;
                                        var tl = parseInt(Drag.getInfo(Drag.tdiv).left);
                                        var tt = parseInt(Drag.getInfo(Drag.tdiv).top);
                                        var kl = (tl-Drag.getInfo(Drag.ao).left)/ab;
                                        var kt = (tt-Drag.getInfo(Drag.ao).top)/ab;
                                        var kf = f/ab;
                                        return setInterval(
                                                function(){
                                                        if(ab<1){
                                                                clearInterval(Drag.mm);
                                                                Drag.tdiv.removeNode(true);
                                                                Drag.ao = null;
                                                                return;
                                                        }
                                                        ab--;
                                                        tl -= kl;
                                                        tt -= kt;
                                                        f -= kf;
                                                        Drag.tdiv.style.left = parseInt(tl)+"px";
                                                        Drag.tdiv.style.top = parseInt(tt)+"px";
                                                        Drag.tdiv.filters.alpha.opacity = f;
                                                }// end 动画效果
                                                ,aa/ab)
                                }// end function repos()
                                ,
                                inint:function(){//初始化
                                        Drag.initTablePos();
                                        for(var i = 0;i<parentTable.cells.length;i++){
                                                var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                for(var j = 0;j<subTables.length;j++){
                                                        if(subTables[j].className !=  "dragTable") break;
                                                        subTables[j].rows[0].className = "dragTR";
                                                        subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
                                                }
                                        }
                                       
                                        document.onmousemove = Drag.draging;
                                        document.onmouseup = Drag.dragEnd;
                                }// end function inint()
                }//end of Object Drag

                Drag.inint();

Google 个性化主页类似，如何保存最后的布局二

<body leftmargin="0" topmargin="0" onselectstart="return false;">
<div  id="BisMainTitle">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="title">BIS &raquo; PortalPage</td>
            <td align="right">
                                <a href="javascript:saveLayout();" style="display:none;" id="savelayout">
                                        保存布局
                </a>
                        </td>
        </tr>
    </table>
</div>
<div  id="BisMainTable">
<table width="100%" border="0" cellpadding="0" cellspacing="5" id="parentTable">
        <tr>
                <!-- Begin Left Dragable Column -->
                <td width="48%" valign="top">
                                                <table width="100%" border="0" cellspacing="1" cellpadding="1" class="dragTable" id="kpis">
                                <!-- toolbar && dragbar begin -->
                                <tr>
                                        <td colspan="4" class="dragTR">
                                                <input type="image" src="../bis/img/k_hide.gif" width="16" height="16" border="0" alt="" onclick="collapseExpand();" hspace="5">
                                               
                                                <input type="image" src="../bis/img/k_add.gif" width="16" height="16" border="0" alt="">
                                                <input type="image" src="../bis/img/k_more.gif" width="16" height="16" border="0" alt="">
                                        </td>
                                </tr>
                                <!-- toolbar && dragbar end -->
                                                                                                <tr bgcolor = "#FFFFFF">
                                        <td colspan = "4" align = "center">
                                                无任何记录.
                                                <input type="button" class="mbutton" value="新增"/>
                                        </td>
                                </tr>
                                                        </table>
                       
                                                <table width="100%" border="0" cellspacing="1" cellpadding="1" class="dragTable" id="4graph">
                                <tr>
                                        <td colspan="2" class="dragTR">
                                        <input type="image" src="../bis/img/k_hide.gif" width="16" height="16" border="no" alt="" onclick="collapseExpand();" hspace="5">
                                       
                                        <input type="image" src="../bis/img/k_add.gif" width="16" height="16" border="0" alt="">
                                        <input type="image" src="../bis/img/k_more.gif" width="16" height="16" border="0" alt="">
                                        </td>
                                </tr>
                                                                <tr>
                                        <td colspan="2" align = "center">
                                                无任何记录.
                                                <input type="button" class="mbutton" value="新增"/>
                                        </td>
                                </tr>
                                                        </table>
                       
                                        </td>
                <!-- End Left Dragable Column -->

                <td width="48%" valign="top">
                        <table width="100%" border="0" cellpadding="1" cellspacing="1" class="dragTable" id="favorite">
                                <tr>
                                        <td colspan="4" class="dragTR"> <input type="image" src="../bis/img/k_hide.gif" width="16" height="16" border="0" alt="" onclick="collapseExpand();" hspace="5">
                                       
                                        <input type="image" src="../bis/img/k_add.gif" width="16" height="16" border="0" alt="">
                                        <input type="image" src="../bis/img/k_more.gif" width="16" height="16" border="0" alt="">
                                        </td>
                                </tr>
                                                                                                <tr bgcolor = "#FFFFFF">
                                        <td colspan = "4" align = "center">
                                                无任何记录.
                                                <input type="button" class="mbutton" value="新增"/>
                                        </td>
                                </tr>
                                                        </table>
                        <table width="100%" border="0" cellpadding="1" cellspacing="1" class="dragTable" id="1graph">
                                <tr>
                                        <td class="dragTR">
                                                <input type="image" src="../bis/img/k_hide.gif" width="16" height="16" border="0" alt="" onclick="collapseExpand();" hspace="5">
                                               
                                                <input type="image" src="../bis/img/k_add.gif" width="16" height="16" border="0" alt="">
                                                <input type="image" src="../bis/img/k_more.gif" width="16" height="16" border="0" alt="">
                                        </td>
                                </tr>
                                                                <tr>
                                        <td align = "center">
                                                无任何记录.
                                                <input type="button" class="mbutton" value="新增"/>
                                        </td>
                                </tr>
                                                        </table>
                </td>
        </tr>
</table>
</div</body>