jQuery sortable demo

by Brian von Konsky

HTML

<!-- UL is container -->
<ul id="sortable">
    <!-- Item 1 -->
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    
    <!-- Item 2 -->
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    
    <!-- Item 3 -->
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>

<button onclick="recordData()">Record</button>

CSS

#sortable {
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     width: 60%; 
}

#sortable li { 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em; 
    font-size: 1.4em; 
    height: 18px; 
}

#sortable li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

JavaScript

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

function recordData() {
     var child = document.getElementById("sortable").children;
     var html = "";
    alert("There are " + child.length + " children");
    for (var i=0 ; i<child.length ; i++) {
        html += child[i].textContent;
    }
    alert(html);
}