Sortable test

HTML

<ul id="sortable1" class="list1" id="list1">
    <li class="ui-state-highlight" id="item1">First Item<div style="float:right;">500</div></li>
    <li class="ui-state-highlight" id="item2">Second Item<div style="float:right;">2000</div></li>
    <li class="ui-state-highlight" id="item3">Third Item<div style="float:right;">1700</div></li>
    <li class="ui-state-highlight" id="item4">Fourth Item<div style="float:right;">10500</div></li>
    <li class="ui-state-highlight" id="item5">Fifth Item<div style="float:right;">950</div></li>
</ul>

<ul id="sortable2" class="list2" id="list2">
    <li class="ui-state-highlight" id="item6">Sixth Item<div style="float:right;">500</div></li>
    <li class="ui-state-highlight" id="item7">Seventh Item<div style="float:right;">2000</div></li>
    <li class="ui-state-highlight" id="item8">Eighth Item<div style="float:right;">1700</div></li>
    <li class="ui-state-highlight" id="item9">Ninth Item<div style="float:right;">10500</div></li>
    <li class="ui-state-highlight" id="item10">Tenth Item<div style="float:right;">950</div></li>
</ul>

<ul id="sortable3" class="list3" id="list3">
    <li class="ui-state-highlight" id="item11">Eleventh Item<div style="float:right;">500</div></li>
    <li class="ui-state-highlight" id="item12">Twelth Item<div style="float:right;">2000</div></li>
    <li class="ui-state-highlight" id="item13">Thirteenth Item<div style="float:right;">1700</div></li>
    <li class="ui-state-highlight" id="item14">Fourteenth Item<div style="float:right;">10500</div></li>
    <li class="ui-state-highlight" id="item15">Fifteenth Item<div style="float:right;">950</div></li>
</ul>

CSS

li {
display: list-item;
text-align: -webkit-match-parent;
}

#sortable1, #sortable2, #sortable3 {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
margin-right: 10px;
background: #EEE;
padding: 5px;
width: 143px;
}

.ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c; color: #363636; }

JavaScript

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        items: 'li:not(.ui-state-disabled)',
        receive: received
    });        
});

var received = function(e) {
    $('ul').each(function(){
       var total = 0;
        $(this).find('li:not(.ui-state-disabled)').each(function() {
            total += parseInt($(this).find('div').text());
        });
        $(this).find('li.ui-state-disabled').remove();
        $(this).append('<li class="ui-state-disabled">Total: '+total+'</li>');
    });
}