UI Drag'n'Drop in JQuery

I'm working on Drag'n'Drop interface. Everything works OK. I need help with some additional functionality.

I have 3 columns with dragged items. Every item have a title number: 1,2,3,... I want to change the number in the panel title to reflect the order of the panel in the column (so if you drag a panel to the top开发者_Python百科 it becomes 1 and the panels below it 2, 3 etc.).

Is this what you want?

$( ".content .draggable-area" ).sortable({
    connectWith: ".draggable-area",
    tolerance: "pointer",
    cursor: "move",
    cursorAt: {top: 10, left: 10},
    distance: 30,
    opacity: 0.8,
    stop: function(event, ui) {
        $('.draggable-area').each(function(){
            $(this).find('.draggable-box').each(function(){
               $(this).find('h2').html($(this).index()+1); 
            });
        });
    }
});

demo:
http://jsfiddle.net/Xr3ne/1/