このサンプルは、jQuery UIのsortable()プラグインを利用してポートレットを表示します。ポートレットは３列で表示されますが、これらのポートレットはそれぞれの列を移動させることができます。たとえば、１列目の「Feeds」をドラッグして２列目に移動するとプレースホルダー(空白ボックス)が表示されますのでドロップします。ポートレットの[+]ボタンをクリックするとコンテンツを折りたたみます。[-]ボタンをクリックするとコンテンツを展開します。
$(".column").sortable({
connectWith: ['.column']
});
$(".portlet").addClass("ui-widget ui-widget-content
ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});