SORTABLE - TWO PARENT CONTAINERS - CONNECT WITH - Test Case Boilerplate

Fork this way...

by bizamajig

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
    <div class="demo">

        <ul id="sortable" class="sortable">
            <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
            <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
            <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
            <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
            <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
            <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
            <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
        
        <hr >
        
        <ul id="sortable2" class="sortable">
            <li id="item1" class="ui-state-default item1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bottom 1</li>
            <li id="item2" class="ui-state-default item2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bottom 2</li>
            <li id="item3" class="ui-state-default item3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bottom 3</li>
            <li id="item4" class="ui-state-default item4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bottom 4</li>
            <li id="item5" class="ui-state-default item5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bottom 5</li>
            <li id="item6" class="ui-state-default item6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bottom 6</li>
            <li id="item7" class="ui-state-default item7"><span class="ui-icon...

CSS

#sortable,#sortable2  { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li,#sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span,#sortable2 li span { position: absolute; margin-left: -1.3em; }

JavaScript

$(function() {
            $('#sortable li').each(function(){
                //$(this).data('id',$(this).attr('id'));
                $(this).attr('data-id',$(this).attr('id'));
            });
            $( "#sortable,#sortable2" ).sortable({ 
                helper: "clone",
                connectWith: ".sortable"
            });
            $( "#sortable,#sortable2" ).disableSelection();
        });