jQuery sortable placeholder position number

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.

DEMO

SCRIPT

$("#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();​