jQuery的模块拖动插件Jquery sortable ，就是igoogle和my.baidu的那种效果，能拖动层，并保存。下次进来时还是保存后的。Jquery sortable使用很简单，只要设置了div的class为portlet 就能实现拖拽了。一部分代码如下：

<div class="demo">

	<div class="column">  

	 <div class="portlet">  
		<div class="portlet-header">Feeds</div>  
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  
	 </div>  

	 <div class="portlet">  
		<div class="portlet-header">News</div>  
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  
	 </div>  

	</div>

	<div class="column">  

	 <div class="portlet">  
		<div class="portlet-header">Shopping</div>  
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  
	 </div>  

	</div>

	<div class="column">  

	 <div class="portlet">  
	  <div class="portlet-header">Links</div>  
	  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  
	 </div>  

	 <div class="portlet">  
	  <div class="portlet-header">Images</div>  
	  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  
	 </div>  

	</div>

</div>

js代码：

<script type="text/javascript"><!--  
 $(function() {  
  $(".column").sortable({  
   connectWith: '.column'  
  });  

  $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")  
   .find(".portlet-header")  
    .addClass("ui-widget-header ui-corner-all")  
    .prepend('<span class="ui-icon-minusthick ui-icon"></span>')  
    .end()  
   .find(".portlet-content");  

  $(".portlet-header .ui-icon").click(function() {  
   $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");  
   $(this).parents(".portlet:first").find(".portlet-content").toggle();  
  });  

  $(".column").disableSelection();  
 });  

// --></script>

下面是保存至 cookie 记录的代码

<script type="text/javascript"><!--  
function MadeDiv()  
{
	if (!$.cookie("dao_list")) {  
	    $.cookie("dao_list", "c1:0@1@2@3@4@|c2:5@6@7@8@9@");   
	}  
	var list = $.cookie("dao_list");   
	var arrColumn = list.split('|');  
	 $.each(arrColumn, function(m, n) {  
	    var elemId = n.split(':')[0];   
	    var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : "";   
	    $.each(arrRow, function(m, n) {  
	        if (n) {  
	            $("#" + elemId).append($("#dao_hang" + n).attr('id', n))  
	        }  
	    });  
	 })  

	$(".column").sortable({  
	connectWith: '.column',  
	handle:'.portlet-header',  
	cursor: 'move',  
	stop:saveLayout  
	});  

	$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")  
	.find(".portlet-header")  
	.addClass("ui-widget-header ui-corner-all")  
	.prepend('<span class="ui-icon ui-icon-closethick" title=/"点击删除导航/"></span>')  
	.end()  
	.find(".portlet-content");  

	$(".portlet-header .ui-icon").click(function() {  
	        var this_box=$(this).parent().parent().closest("div").remove();  
	        saveLayout();  
	});  
	$(".column").disableSelection();  
	$( ".column" ).sortable( { forcePlaceholderSize: true } );  
}  
function saveLayout() {  
    var list = "";  
    $.each($(".column"), function(m) {  
        list += $(this).attr('id') + ":";  
        $.each($(this).children(".portlet"), function(d) {  
            list += $(this).attr('id') + "@";  
        })  
        list += "|";  
    })  
    $.cookie("dao_list",list, {expires: 300});  
}  
function moren()  
{  
    $.cookie("dao_list","c1:0@1@2@3@4@|c2:5@6@7@8@9@", {expires: 300});  
    window.location.reload();  
}  

// --></script>

示例地址：http://www.lovewebgames.com/demo/sortable/sortable.html

官方示例地址：http://jqueryui.com/demos/sortable/

参考：

关于jquery中的sortable排序之后的保存状态的办法
http://www.lovewebgames.com/demo/sortable/

用Jquery UI Sortable与数据库实现div拖动（类似iGoogle）
http://www.ineyes.org/634-with-jquery-ui-sortable-drag-and-database-implementation-div-similar-to-igoogle