Connect & Sortable

by bizamajig

HTML

<div class="demo"> 
    <ul id="sortable1" class="connectedSortable">
        <li id="item1" class="ui-state-default">Item 1</li>
        <li id="item2" class="ui-state-default">Item 2</li>
        <li id="item3" class="ui-state-default">Item 3</li>
        <li id="item4" class="ui-state-default">Item 4</li>
        <li id="item5" class="ui-state-default">Item 5</li>
    </ul>
    <ul id="sortable2" class="connectedSortable">
        <li id="item6" class="ui-state-highlight">Item 6</li>
        <li id="item7" class="ui-state-highlight">Item 7</li>
        <li id="item8" class="ui-state-highlight">Item 8</li>
        <li id="item9" class="ui-state-highlight">Item 9</li>
        <li id="item10" class="ui-state-highlight">Item 10</li>
    </ul>
</div>


<div class="sortable1 list"></div>
<div class="sortable2 list"></div>

CSS

#sortable1, #sortable2 {
    list-style-type: none;
    margin: 0; padding: 0;
    float: left; margin-right: 10px; 
}    
#sortable1 li, #sortable2 li { 
    margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; 
}
.sortable1.list, .sortable1.lis { 
    clear:both;
}

JavaScript

//$( "#sortable1, #sortable2" ).sortable({
$( "#sortable1" ).sortable({
//    connectWith: ".connectedSortable",
    stop: function(event, ui) {
        $('.connectedSortable').each(function() {
            result = "";
            alert($(this).sortable("toArray"));
            $(this).find("li").each(function(){
                result += $(this).text() + ",";
            });
            $("."+$(this).attr("id")+".list").html(result);
        });
    }
});