Sortable test

by tametech

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",
 
        receive: function(event, ui) {
                var list1 = new Array();
                var list2 = new Array();
                var list3 = new Array();
                
                $(".list1 li").each(function() {
                    list1.push($(this).attr("id"));
                });

                $(".list2 li").each(function() {
                    list2.push($(this).attr("id"));
                });

                $(".list3 li").each(function() {
                    list3.push($(this).attr("id"));
                });
            
                console.log(list1.toString()); 
                console.log(list2.toString());
                console.log(list3.toString()); 
        }

        });
            
        $( "#sortable1, #sortable2, #sortable3" ).disableSelection();
    });