jQuery sortable placeholder position number

In some cases while sorting a lot of elements you might find it useful to know the exact numeric position of what you're dragging,

by jQuery DotNet

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<ul id="sortable_nav" class="sortable ui-sortable">
    <li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s">
    </span>
        Apple
        <div class="ui-state-default sortable-number">
            1
        </div>
    </li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        Mengo
        <div class="ui-state-default sortable-number">
            2
        </div>
    </li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        Banana
        <div class="ui-state-default sortable-number">
            3
        </div>
    </li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        Ginger
        <div class="ui-state-default sortable-number">
            4
        </div>
    </li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        Watermelon
        <div class="ui-state-default sortable-number">
            5
        </div>
    </li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        Blackberry
        <div class="ui-state-default sortable-number">
            6
        </div>
    </li>
</ul>

CSS

body { padding:10px; }
.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; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
.sortable-number { width: 25px;float: right;line-height: 1em;text-align: center;font-weight: bold; }

JavaScript

$("#sortable_nav").sortable({
    placeholder: "ui-state-highlight",
    helper: 'clone',
    sort: function(e, ui) {
        $(ui.placeholder).html(Number($("#sortable_nav > li:visible").index(ui.placeholder)) + 1);
    },
    update: function(event, ui) {
        var $lis = $(this).children('li');
        $lis.each(function() {
            var $li = $(this);
            var newVal = $(this).index() + 1;
            $(this).children('.sortable-number').html(newVal);
            $(this).children('#item_display_order').val(newVal);
        });
    }
});
$("#sortable_nav").disableSelection();