Revision: 24680
Updated Code
at March 8, 2010 10:38 by vagrantradio
Updated Code
//placeholder
<style type="text/css">
.ui-sortable-placeholder { border: 1px dotted #999;background:#f4f4f4; visibility: visible !important; height: 100% !important; width:100%!important; }
</style>
//markup
<div id="side">
<div id="item1">item1</div>
<div id="item2">item2</div>
</div>
//functions
// set the list selector
var setSelector = "div#side";
// 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 = $("div#side.ui-sortable").children("#" + item);
// select the item according to the saved order
var savedOrd = $("div#side.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!
$("div#side.ui-sortable").filter(":first").append(savedOrd);
}
}
}
jQuery(document).ready(function() {
jQuery("div#side").sortable({axis: "y",
cursor: "move",
update: function() { getOrder(); }
});
// here, we reload the saved order
restoreOrder();
});
Revision: 24679
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at March 8, 2010 10:37 by vagrantradio
Initial Code
//placeholder
<style type="text/css">
.ui-sortable-placeholder { border: 1px dotted #999;background:#f4f4f4; visibility: visible !important; height: 100%px !important; width:100%!important; }
</style>
//markup
<div id="side">
<div id="item1">item1</div>
<div id="item2">item2</div>
</div>
//functions
// set the list selector
var setSelector = "div#side";
// 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 = $("div#side.ui-sortable").children("#" + item);
// select the item according to the saved order
var savedOrd = $("div#side.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!
$("div#side.ui-sortable").filter(":first").append(savedOrd);
}
}
}
jQuery(document).ready(function() {
jQuery("div#side").sortable({axis: "y",
cursor: "move",
update: function() { getOrder(); }
});
// here, we reload the saved order
restoreOrder();
});
Initial URL
http://jqueryui.com/demos/sortable/#placeholder
Initial Description
include jQuery, jQuery ui and jQuery cookie plugin. Simple.
Initial Title
jQuery UI Sortable list with cookie
Initial Tags
jquery
Initial Language
jQuery