Sortable: Show placeholder's position and give it a number

Sortable: Show placeholder's position and give it a 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:


<style type="text/css">
.ui-sort-position {
      text-align: center;
      font-size: 3.8em;
}
</style>

<script javascript="text/javascript">
$("#sortable").sortable({
      placeholder: 'ui-state-highlight ui-sort-position',
      helper: 'clone',
      sort: function(e,ui){
                /* The trick is that jQuery hides the inline element while user drags an absolute positioned clone so we want to deal only with the visible elements. Index order + 1 = UI order.*/
                $(ui.placeholder).html(Number($("#categories > li:visible").index(ui.placeholder)+1));
              }
});
</script>


Hope someone find it useful.
    • Topic Participants

    • info