Example of sortable "portlets" and saving position

index.html.erb

<h1>MenuItems#index</h1>

	<style>
	.column { width: 170px; float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
	</style>
	<script>
    $(function() {
	var el ; 
	$( ".column" ).sortable({
	    connectWith: ".column",
	    update: function(event, ui) { 
		
		var result = $(this).sortable('serialize');
		console.log("col " + $(this).attr('id') + " Index " + result);
	    }
	});

	$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
	    .find( ".portlet-header" )
	    .addClass( "ui-widget-header ui-corner-all" )
	    .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
	    .end()
	    .find( ".portlet-content" );

	$( ".portlet-header .ui-icon" ).click(function() {
	    $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
	    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
	});

	$( ".column" ).disableSelection();
    });
	</script>




<div class="column" id="column0">

	<div class="portlet" id="portlet_0">
		<div class="portlet-header">News</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

	<div class="portlet" id="portlet_1">
		<div class="portlet-header">Feeds</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

</div>

<div class="column" id="column1">

	<div class="portlet" id="portlet_2">
		<div class="portlet-header">Shopping</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

</div>

<div class="column" id="column2">

	<div class="portlet" id="portlet_3">
		<div class="portlet-header">Links</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>
	
	<div class="portlet" id="portlet_4">
		<div class="portlet-header">Images</div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>

</div>