jQuery Horizontal Sorting

by agib

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 1ksæjdlf adsjfæjsa fæjasfæljsaæ jfæsajfælsaj fæljsal jfælsa jfljsaf jas æfljsa ælfjsaæf jlsajf æljsafæl jsaælfsadfsda fsad fsa</li>
    <li>Item 2</li>
</ul>

CSS

ul {
    list-style-type: none;
    display: flex;
    background: blue;
    padding: 0;
    width: 100%;
}
ul>li {
    flex: 1;
    background: red;
    padding: 5px;
    border: 5px solid white;
}

JavaScript

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

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