jQuery Sortable Divs, replicate BBC home page

Question

Hi there

I am trying to replicate the sortable portals design as seen on the bbc home page, using Jquery.

I have used the code from the jQuery ui site to recreate the drag and drop portlets, as shown here.

    $(function() {
    $(".column").sortable({
        connectWith: '.column'
    });
    $(".column").disableSelection();
});

HTML

<div class="column">

<div class="portlet">
    <div class="portlet-header">Contact Us</div>
    <div class="portlet-content">Content</div>
</div>

    <div class="portlet">
    <div class="portlet-header">Test</div>
    <div class="portlet-content">Content</div>
</div>
</div>

<div class="column">

<div class="portlet">
    <div class="portlet-header">Market Sector</div>
    <div class="portlet-content">Content</div>
</div>

<div class="portlet">
    <div class="portlet-header">Clients</div>
    <div class="portlet-content">Content</div>
</div>
</div>

This is working smoothly, however, I have noticed in this demo, that if you drag a portlet across columns, the portlet gets added to the column. What I am trying to achieve is what is active on the BBC site, whereby when you move a portlet across columns, the other portlets move out of the way to allow space for it.

Hope this makes sense, does any one have any ideas?

Thanks