欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery sortbale cookie保存排序

程序员文章站 2022-04-12 21:22:36
Js代码 

       ...

Js代码 
<p class="demo">   
   
<p class="column">   
   
 <p class="portlet">   
  <p class="portlet-header">Feeds</p>   
  <p class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>   
 </p>   
    
 <p class="portlet">   
  <p class="portlet-header">News</p>   
  <p class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>   
 </p>   
   
</p>   
   
<p class="column">   
   
 <p class="portlet">   
  <p class="portlet-header">Shopping</p>   
  <p class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>   
 </p>   
   
</p>   
   
<p class="column">   
   
 <p class="portlet">   
  <p class="portlet-header">Links</p>   
  <p class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>   
 </p>   
    
 <p class="portlet">   
  <p class="portlet-header">Images</p>   
  <p class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>   
 </p>   
   
</p>   
   
</p>   
   
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("p").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();   
}