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">
<table id="sortable_nav">
  <tbody class="ordenable">
  <tr>
    <td class="ui-state-default">
        <input type="text" class="ordena" value="1">1 Apple 
        <div class="ui-state-default sortable-number">1</div>
    </td>
   </tr>
   </tbody>
   
   <tbody class="ordenable">
    <tr>
    <td class="ui-state-default">
        <input type="text" class="ordena" value="2">2 Caca
        <div class="ui-state-default sortable-number">2</div>
    </td>
  </tr>    
    <tr>
    <td class="ui-state-default">
         <input type="text" class="ordena" value="3">3 Banana
        <div class="ui-state-default sortable-number">3</div>
    </td>
  </tr>
  </tbody>
  
<tbody class="ordenable">
<tr>    
    <td class="ui-state-default">
        <input type="text" class="ordena" value="4">4 Ginger
        <div class="ui-state-default sortable-number">4</div>
    </td>
  </tr>    
  </tbody>
  
<tbody class="ordenable">
<tr>
  <td class="ui-state-default">
        <input type="text" class="ordena" value="5">5 Watermelon
        <div class="ui-state-default sortable-number">5</div>
    </td>
  </tr>    
  </tbody>
  <tbody class="ordenable">
  <tr>
  <td class="ui-state-default">
       <input type="text" class="ordena" value="6">6 Blackberry
        <div class="ui-state-default sortable-number">6</div>
    </td>
  </tr> 
  </tbody>  
</table>

CSS

body { padding:10px; }
.sortable td { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
.sortable td span { position: absolute; margin-left: -1.3em; }
.sortable-number { width: 25px;float: right;line-height: 1em;text-align: center;font-weight: bold; }

JavaScript

$("#sortable_nav").sortable({
items: ".ordenable",
	cursor: 'move',
	opacity: 0.2,
    update: function(event, ui) {
        var $lis = $(this).children('tbody');
        $lis.each(function() {
            var $li = $(this);
            var newVal = $(this).index() + 1;
            $(this).children('.ordena').val(newVal);
            $(this).children('.sortable-number').html(newVal);
          
        });
    }
}).disableSelection();