Posted By

vagrantradio on 03/08/10

Tagged

jquery

Versions (?)

Last Edited at 03/08/10 10:37am

Statistics

Viewed 900 times

Favorited by 0 user(s)

Related snippets

jQuery UI Sortable list with cookie

/ Published in: jQuery

include jQuery, jQuery ui and jQuery cookie plugin. Simple.

Highlighted TextExpand

//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();
});

URL: http://jqueryui.com/demos/sortable/#placeholder

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.