转jquery sortbale cookie保存排序。。

<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代码：  
  
 <mce: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();  
 });  
   
// --></mce:script>  
  
下面是保存代码  
 
    <mce: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();  
}