To initialize the portlets, we will turn the column
div into jQuery UI's sortable
components. Since there are two columns, we will make the connection as well so that portlets of a column could be dragged into another column. We will also add a toggle button to portlet header.
Write the following code inside the initPortlets
method to initialize them:
$(".column").sortable( { connectWith: ".column", handle: ".portlet-header", cancel: ".portlet-toggle", placeholder: "portlet-placeholder ui-corner-all" }); $(".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 portlet-toggle'></span>"); $(".portlet-toggle").click(function() { var icon = $(this); icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); icon.closest(".portlet").find(".portlet-content").toggle('fast'); }); $('#loadingWeather...