jQuery Horizontal Sorting

by mukkaram waheed

HTML

<p>Try sorting the items on list-1. Note how easy it is.
    <br />Now move all the list items from list-1 onto the list-2, try to reorder them, and compare.</p>
<ul id="list-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>
<ul id="list-2">
    <!-- workaround - do the same with this li enabled and it is fixed <li>Item 1</li>
    -->
</ul>

CSS

ul {
    list-style-type: none;
    display: block;
    background: blue;
    width:250px;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
}
ul>li {
    float: left;
    background: red;
    width: 50px;
    margin: 5px;
    padding: 5px;
    height: 20px;
}

JavaScript

$("#list-1").sortable({
    connectWith: "#list-2"
})
    .disableSelection();

$("#list-2").sortable({
    connectWith: "#list-1"
})
    .disableSelection();

$( "#list-2" ).data( "ui-sortable" ).floating = true;