Jquery UI sortable portlets: switching the places of two portlets

Question

I am pretty new to the JQuery UI and not very familiar with how to use options, methods, and events. I am using the Jquery UI Sortable portlets (example found here) and what I'm doing is pretty similar to the example, I have 3 columns but I only have 1 portlet per column.

(here is a fiddle) and this is it's basic html:

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

What I want to happen is for the portlets to switch or exchange places when placed in a different column (so the portlet that is already in the column the currently dragged portlet came into goes to where the dragged portlet came from.)

My research lead me to a similar question with no answer, but I haven't found the answer for this question anywhere.

I know there is documentation (found here) about the Jquery UI sortable options, methods, and events. I think this is where my problem can be solved my dilemma is that I'm new to these things and am not sure where to start or where to go from there. I have somewhat of an idea of what events should probably be used, but am not sure how to use them.

I think the over event would be useful because my understanding is it will tell us that a portlet has been dragged to a new column. The ui object that is sent with the over event has a property sender which tells us what sortable the portlet came from; that sortable should be the destination of the other portlet which was already in the column the current dragged portlet just moved into. I also think the ui.item property would be useful as well so that if you could get the jquery objects within a column you can tell which one recently got added and which one was already there.

This is about as far as I understand it.

Your answers would be much appreciated. :)

Answer 1

Hey I found it out with help from my Sister!!

 var beforeDiv;
 $(".column").sortable({
    connectWith: ".column",
    start: function (event, ui) {
        beforeDiv = ui.item.closest('div.column');
    },
    beforeStop: function (event, ui) {
        var afterDiv = ui.item.closest('div.column');

        beforeDiv.prepend(afterDiv.find(".portlet").not(".ui-sortable-placeholder").not(ui.item));
    }
});

here is the fiddle: http://jsfiddle.net/FXrzN/45/