Test Case Boilerplate

Fork this way...

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">
            <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">
            <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 ui-icon-arrowthick-2-n-s"></span>Bottom 7</li>
        </ul>

   ...

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'));
            });
            var setUpSortable= function() {
                $( "#sortable,#sortable2" ).sortable({ 
                    start: function(event,li){
                        $(event.srcElement).addClass('isold');
                    },
                    update: function(event,li){
                        $(event.srcElement).attr('id',$(event.srcElement).data('id'));
                        if(event.target.id == 'sortable')
                        {
                            $('#sortable .isold').remove();
                        }
                        $('#sortable .isold').removeClass('isold');
                        setUpSortable();//re-initialize sortable
                    }
                });
                $('#sortable li').draggable({ opacity: 0.7, helper: "clone" , connectToSortable:"#sortable,#sortable2",revert:false});
                $( "#sortable,#sortable2" ).disableSelection();
            };
            setUpSortable();
        });