jQuery Mobile sortable list

Does it work?

by Fairlight

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="content">
        <ul id="sortable">
            <li>1<div class="child">C</div></li>
            <li>2<div class="child">C</div></li>           
        </ul>
        <hr>
        <ul id="draggable">
            <li>3<div class="child" style="display: none;">C</div></li>
            <li>4<div class="child" style="display: none;">C</div></li>           
        </ul>
    </div>
</div>

CSS

li { width: 300px; }
.child{ float: right; width: 10px; background-color: red;}

JavaScript

$(document).ready(function(e) {
    
    $('#sortable').sortable({
        
        helper: 'clone',
        items: 'li', 
        receive: function (e,ui)
        {              
             ui.item.children(".child").show();
        }
    });
    
    
    $('#draggable li').draggable({
        connectToSortable: '#sortable',
        helper: 'clone'
        
        
    });
    
    
});