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 tibum

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>
    <div class="requete">Apple</div>
    <div class="concentration">42.5 ng/ul</div>
    <div class="volume">100 ul</div>
    <div class="ui-state-default sortable-number">1</div>
    <div class="ui-state-default sortable-numbers">1</div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    <div class="requete">Mengo</div>
    <div class="concentration">42.5 ng/ul</div>
    <div class="volume">100 ul</div>
    <div class="ui-state-default sortable-number">2</div>
    <div class="ui-state-default sortable-numbers">2</div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    <div class="requete">Banana</div>
    <div class="concentration">42.5 ng/ul</div>
    <div class="volume">100 ul</div>
    <div class="ui-state-default sortable-number">3</div>
    <div class="ui-state-default sortable-numbers">3</div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    <div class="requete">Ginger</div>
    <div class="concentration">42.5 ng/ul</div>
    <div class="volume">100 ul</div>
    <div class="ui-state-default sortable-number">4</div>
    <div class="ui-state-default sortable-numbers">4</div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    <div class="requete">Watermelon</div>
    <div class="concentration">42.5 ng/ul</div>
    <div class="volume">100 ul</div>
    <div class="ui-state-default sortable-number"> 5</div>
    <div class="ui-state-default sortable-numbers">5</div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    <div class="requete">Blackberry</div>
    <div class="concentration">42.5...

CSS

body {
  padding: 10px;
}

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

.sortable li {
  float: left;
  border: 2px solid cornflowerblue;
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.0em;
  width: 100px;
  height: 90px;
}

.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;
  border: 2px solid cornflowerblue;
}

.sortable-numbers {
  width: 25px;
  float: left;
  line-height: 1em;
  text-align: center;
  font-weight: bold;
  border: 2px solid red;
}

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);
      alert($(this).children('.sortable-number').html() + ":" + $(this).children('.requete').html());
    });
  }
});
$("#sortable_nav").disableSelection();