jQuery UI Sortable and Cookie

问题:

I must admit, that I'm pretty much newbie to jQuery, though I want to somehow make this work.

I have a igoogle style content with sortable widgets with this code

HTML

     
         
             Header Widget         
                   
             
             Content widget             
                
         
 
   
         
             
                 Header Widget             
                       
                 
                 Content widget                 
                    
             
     
 

jQuery

$(".column").sortable({         connectWith: '.column',         handle: '.box-header',         revert: 500     });

How do I get this work with cookie plugin?

Thanks for your time and help.

回答1:

First off, download the cookie plug-in (if you haven't already): http://plugins.jquery.com/project/cookie

Next, read this short article that explains how to use the plug-in: http://www.electrictoolbox.com/jquery-cookies/

Finally, decide what information you want to store between page loads, and then hook up events to save that info whenever appropriate. To use that information, add an onReady event that looks it up and does something with it.

For instance, if you wanted to keep track of which column is in which order, you would need to put some IDs on those columns, then do:

$(".column").sortable({   connectWith: '.column',   handle: '.box-header',   revert: 500   update: function(event, ui) {     // This will trigger after a sort is completed     var ordering = "";     var $columns = $(".column");     $columns.each(function() {       ordering += this.id + "=" + $columns.index(this) + ";";     });     $.cookie("ordering", ordering);   } });

and then do something like the following to use that information:

$(function() {   var ordering = $.cookie("ordering");   var orderings = ordering.split(";");   $.each(orderings, function(index, ordering) {     // Use each ordering, which will be in the form of "someId=someIndex" to actually     // sort your stuff.  Not super-familiar with the Sortable package so you'll have to look     // this part up on your own ... or just use basic jQuery stuff   }; });

Hope that helps.

回答2:

You Can Try This

var setSelector = "#list1"; var setCookieName = "listOrder"; var setCookieExpiry = 7;   // function that writes the list order to a cookie function getOrder() {     // save custom order to cookie     $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" }); }  // function that restores the list order from a cookie function restoreOrder() {     var list = $(setSelector);     if (list == null) return      // fetch the cookie value (saved order)     var cookie = $.cookie(setCookieName);     if (!cookie) return;      // make array from saved order     var IDs = cookie.split(",");      // fetch current order     var items = list.sortable("toArray");      // make array from current order     var rebuild = new Array();     for ( var v=0, len=items.length; v         rebuild[items[v]] = items[v];     }      for (var i = 0, n = IDs.length; i < n; i++) {           var itemID = IDs[i];          if (itemID in rebuild) {               var item = rebuild[itemID];              var child = $("ul.ui-sortable").children("#" + item);              var savedOrd = $("ul.ui-sortable").children("#" + itemID);              child.remove();              $("ul.ui-sortable").filter(":first").append(savedOrd);         }     } }  // code executed when the document loads $(function() {      $(setSelector).sortable({         axis: "y",         cursor: "move",         update: function() { getOrder(); }     });      restoreOrder(); });

Saved In cookie

Quotes from Shopdev

回答3:

Thanks to Elmatou. Just a dirty fix that worked for me (just a letter before you fill the cookie).

$( ".ui-column" ).sortable({       connectWith: ".ui-column",       handle: '.ui-portlet-header',       update: function(event, ui) {           var cooked = new Array;           $( ".ui-column" ).each(function(index, domEle){ cooked[index]= $(domEle).sortable('toArray')});           $.cookie('cookie_name', 'x'+cooked.join('|'), { expires: 7, path: '/'});       } });

回答4:

I saw lot's of things on this topic everywhere on the Internet. I found them not very accurate and extensive. For the record, here is the solution I choose, for a multi-column, portlet dashboard (as in Jquery-UI example). First of all build the columns and portlets.

$( ".ui-portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ); $( ".ui-column .ui-portlet" ).find( ".ui-portlet-header" )               .addClass( "ui-widget-header ui-corner-all" )               .prepend( "")               .end()       .find( ".ui-portlet-content" ); $( ".ui-portlet .ui-portlet-header .ui-icon" ).click(function() {       $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );       $( this ).parents( ".ui-portlet:first" ).find( ".ui-portlet-content" ).toggle("blind", "fast");       return false; }); $( ".ui-column" ).disableSelection();

Then most importante thing give Id's to every elements (columns, portlets...).

$( ".ui-column" ).each(function(index, domEle){ $(domEle).attr('id', 'column_'+index)}) $( ".ui-column .ui-portlet" ).each(function(index, domEle){ $(domEle).attr('id', 'portlet_'+index)})

Then make the thing sortable, with an on update event function to set a cookie after each displacement.

$( ".ui-column" ).sortable({       connectWith: ".ui-column",       handle: '.ui-portlet-header',       update: function(event, ui) {           var cooked = new Array;           $( ".ui-column" ).each(function(index, domEle){ cooked[index]= $(domEle).sortable('toArray')});           $.cookie('cookie_name', cooked.join('|'), { expires: 7, path: '/'});       } });

Now the restoreOrder function.

function restoreOrder() {     var cookie = $.cookie('cookie_name');     if (!cookie) return;     var SavedID = cookie.split('|');     for ( var u=0, ul=SavedID.length; u < ul; u++ ){ SavedID[u] = SavedID[u].split(',');}     for (var Scolumn=0, n = SavedID.length; Scolumn < n; Scolumn++) {         for (var Sitem=0, m = SavedID[Scolumn].length; Sitem < m; Sitem++) {             $(".ui-column").eq(Scolumn).append($(".ui-column").children("#" + SavedID[Scolumn][Sitem]));         }     } } // TODO check why an empty column crash the loops !? Should not be complicate...

And off course after you load your document restoreOrder()

回答5:

Well now I can get an array like this,

function saveOrder() {     var cookieName = "order";      $.cookie(cookieName, $(".column").each(function(){ $(this).sortable("toArray")}));     }

and then

$(".column").sortable({     connectWith: '.column',         handle: '.box-header',         revert: 500,         update: function(event, ui) {         saveOrder();    }

Now how to retrieve it from the cookie?

回答6:

Here an example that uses localStorage to save the order. See example, first the elements need an id. This id will be stored and used in restoring the ordering.

Demo: http://jsfiddle.net/bartburkhardt/2wgnsc2v

      $(function() {          //add id's to the li elements so after sorting we can save the order in localstorage         $( "#sortable>li" ).each(function(index, domEle){ $(domEle).attr('id', 'item_'+index)});          $( "#sortable" ).sortable({           placeholder: "ui-state-highlight",           update: function(event, ui) {                     localStorage.setItem("sorted",  $("#sortable").sortable("toArray") );           }         });          restoreSorted();        });         function restoreSorted(){            var sorted = localStorage["sorted"];                 if(sorted == undefined) return;            var elements = $("#sortable");           var sortedArr = sorted.split(",");            for (var i = 0; i    
block 1
   
block 2
   
block 3
   
block 4
   
block 5
   
block 6
   
block 7
   
block 8
   
block 9
   
block 10
   
block 11
   
block 12
 

转载请标明出处:jQuery UI Sortable and Cookie

文章来源: jQuery UI Sortable and Cookie