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,

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 id="li_1" class="ui-state-default">1</li>
    <li id="li_2" class="ui-state-default">2</li>
    <li id="li_3" class="ui-state-default">3</li>
    <li id="li_4" class="ui-state-default">4</li>
    <li id="li_5" class="ui-state-default">5</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; }

JavaScript

var current_order = {
    'li_1' : 0,
    'li_2' : 1,
    'li_3' : 2,
    'li_4' : 3,
    'li_5' : 4
};

$("#sortable_nav").sortable({
    placeholder: "ui-state-highlight",
    helper: 'clone',
    update: function(event, ui) {
        
        $(this).children('li').each(function() {
            current_order[$(this).attr("id")] = $(this).index();
        }).get();
           
    }
});

$("#sortable_nav").append(
    $("#sortable_nav li").sort(function(a, b) {
        return current_order[$(a).attr('id')] - current_order[$(b).attr('id')];
    })
);