jQuery UI, sortables and Cookie plugin with multiple lists.

Question

I'm using jQuery UI sortable plugin with the cookie plugin to set and get the list of two sortable lists.

I found this piece of code to set and get a cookie: http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/#comment-6441

It works as I want to for one list, but not two (I've made the changes listed in the comments but fail somewhere).

My guess is that I have to specify the first and the second list for the setSelector and not use a class for the list. I tried "var setSelector = "#first, #second"; but that that doesn't do it.

Ideas?

Thanks

$(function() {

// set the list selector
var setSelector = ".sortable";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
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<len; v++ ){
  rebuild[items[v]] = items[v];
 }

 for (var i = 0, n = IDs.length; i < n; i++) {

  // item id from saved order
  var itemID = IDs[i];

  if (itemID in rebuild) {

   // select item id from current order
   var item = rebuild[itemID];

   // select the item according to current order
   var child = $("ul" + setSelector + ".ui-sortable").children("#" + item);

   // select the item according to the saved order
   var savedOrd = $("ul" + setSelector + ".ui-sortable").children("#" + itemID);

   // remove all the items
   child.remove();

   // add the items in turn according to saved order
   // we need to filter here since the "ui-sortable"
   // class is applied to all ul elements and we
   // only want the very first!  You can modify this
   // to support multiple lists - not tested!
   $("ul" + setSelector + ".ui-sortable").filter(":first").append(savedOrd);

  }
 }
}

// code executed when the document loads
$(function() {
 // here, we allow the user to sort the items
 $(setSelector).sortable({
  cursor: 'move',
  items: 'li',
  //axis: "y",
  opacity: 0.6,
  //revert: true,
  scroll: true,
  scrollSensitivity: 40,
  placeholder: 'highlight',
  update: function() { getOrder(); }
 });

 // here, we reload the saved order
 restoreOrder();
});

});

Answer 1

Hi,

Let you replace the code

var setSelector = ".sortable";

to

var setSelector = "#sortable";

Thanks, Sivasubramanian V. ZSL Inc.

Answer 2

I have the same problem and yes, the script needs an ID of the element. But, there can only be one unique ID. So, how to use the code with multiple columns? And then, how to save it and rebuild the page?

Answer 3

_http://code.google.com/p/cookies/

_http://noteskeeper.ru/article/save-state-jquery-ui-sortable/

   root = $("#sidebar");
     $('> *', root).each(function (index) {
      this.id = 'block-' + index;
     });
     root.sortable({
      cursor: 'move',
      revert: true,
      placeholder: 'ui-state-highlight'
     });

     // function that writes the list order to a cookie
     root.bind( "sortupdate", function (event, ui) {
      // save custom order to cookie
            var order = $(this).sortable('serialize');
            $.cookies.set('sortable', order);
        });

     // here, we reload the saved order
     // fetch the cookie value (saved order)
     var c = $.cookies.get('sortable');
     if (c) {
      // function that restores the list order from a cookie
      $.each(c.split('&'), function () {
       var id = this.replace('[]=', '-');
       $('#' + id).appendTo(root);
      });
     }