Reordering List Items On Page Load

by sbhomra

HTML

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

JavaScript

$.fn.reorder = function(callback) {
    function randOrd() {
        return (Math.round(Math.random()) - 0.5);
    }

    return ($(this).each(function() {
        var $this = $(this);
        var $children = $this.children();
        var childCount = $children.length;

        if (childCount > 1) {
            $children.hide();

            var indices = new Array();
            for (i = 0; i < childCount; i++) {
                indices[indices.length] = i;
            }
            indices = indices.sort(randOrd);
            $.each(indices, function(j, k) {
                var $child = $children.eq(k);
                var $clone = $child.clone(true);
                $clone.show().appendTo($this);
                if (callback != undefined) {
                    callback($child, $clone);
                }
                $child.remove();
            });
        }
    }));
}
    

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