jQuery UI Sortable and Cookie

Question

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

<div class="column">
    <div class="box">
        <div class="box-header">
            Header Widget
        </div>
                  <div class="box-content">
            <p>
            Content widget
            </p>
               </div>
        </div>
</div>


<div class="column">
        <div class="box">
            <div class="box-header">
                Header Widget
            </div>
                      <div class="box-content">
                <p>
                Content widget
                </p>
                   </div>
            </div>
    </div>

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.

Answer 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.

Answer 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<len;>
        rebuild[items[v]] = items[v];
    }

    for (var i = 0, n = IDs.length; i &lt; 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