Code:

/*
 * Even with no configuration you get sensible defaults.
 */
$('#ajax-response1').NestedSortableWidget({
	loadUrl: "json_load.php"
});

Output:

Code:

/*
 * Showing how you can:
 *  * Customize the size of the columns and margins
 *  * Add pagination 
 *  * Add a drag handle (whose text and css can be configured)
 *  * Add configuration to the underlying NestedSortable	
 *  * Change the text of anything (good for internationalization)
 *  
 */
$('#ajax-response2').NestedSortableWidget({
	name: 'my_first_widget',
	loadUrl: "json_load.php",
	paginate: true,
	colsWidth: [30, 15],
	whiteMargin: 0.25,
	padding: 0.25,
	measureUnit: "em",
	handle: true,
	nestedSortCfg: {
		opacity: 0.6,
		fx:400,
		revert: true,
		autoScroll: false
	},
	text: {
		saveButton: "Showing how you can easily change the text"
	}
});

Output:

Code:

/*
 * Showing how you can:
 *  * Define a diferent url to save the changes
 *  * How an error is generated and displayed
 *  * How you can configure pagination 
 * 	* How the widget will adapt to right to left nesting (probably for right to left languages)
 * 	* Disable the effect applied to the droppable used to change pages
 * 	* Configure how long it takes to change pages when hovering over the droppable
 *  * Use custom effects in parallel for the page transitions
 *  * 
 */
$('#ajax-response3').NestedSortableWidget({
	name: 'my_second_widget',
	loadUrl: "json_load.php",
	saveUrl: "non_existant_url_to_cause_error",
	paginate: true,
	itemsPerPage: 5,
	startPage: 2,
	nestedSortCfg: {
		rightToLeft: true
	},
	fadeOutHover: false,
	pageChangeTimer: "1000",
	transitionAnim: "normal-series"
});

Output:

Code:

/*
 * Showing how you can:
 *  - Use custom effects in series for the page transitions.
 *  - Your data source may be as dumb as a static file and 
 *	  always return everything.
 */
$('#ajax-response4').NestedSortableWidget({
	name: 'my_third_widget',
	loadUrl: "json_load.js",
	paginate: true,
	itemsPerPage: 4,
	startPage: 1,
	transitionAnim: "custom-series",
	transitionOut: function(callback){
		this.fadeOut(500, callback );
	},
	transitionIn: function(callback){
		this.fadeIn(500, callback );
	}
});

Output:

Code:

/*
 * Showing how you can:
 *  * 	Display the pages to the user in an incremental way.
 *  * 	Use use JSON to serialize the data back to the server
 *  	(the default is url query string like serialization)
 *  *	Define callbacks that are called at key 
 *  	points of the widget life.
 */
$('#ajax-response5').NestedSortableWidget({
	name: 'my_fourth_widget',
	loadUrl: "json_load.php",
	paginate: true,
	itemsPerPage: 5,
	startPage: 3,
	incremental: true,
	onInitialLoad: function() {
		alert('The last widget finished loading.');
	},
	serializeWithJSON: true
});

Output: