saving portlet state

saving portlet state


Using the code provided on this page:
http://ui.jquery.com/demos/sortable/#portlets
How can you use sortable('serialize') or sortable('toArray') to get
the order of the DIVs so they can be saved?
I assigned each portlet its own unique ID:
<div class="column" id="col1">
    <div class="portlet" id="box_feeds">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
    </div>
    <div class="portlet" id="box_news">
        <div class="portlet-header">News</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column" id="col2">
    <div class="portlet" id="box_shopping">
        <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="col3">
    <div class="portlet" id="box_links">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
    </div>
    <div class="portlet" id="box_images">
        <div class="portlet-header">Images</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
    </div>
</div>
When I try, all I get is a list from the first column only, even
though all DIVs can be moved between all 3 columns.
        $(".column").sortable({
            connectWith: ['.column'],
            stop: function() {
                alert($(".column").sortable("toArray"));
            }
        });
Help! This driving me MAD! :)
TIA,
Chris