Posición ordenable de jQuery UI

¿Cómo hago un seguimiento de la posición de un elemento cuando cambia su posición en una lista ordenable?

Puede usar el uiobjeto proporcionado a los eventos, específicamente desea el stopevento , la ui.itempropiedad y .index(), de esta manera:

$("#sortable").sortable({
    stop: function(event, ui) {
        alert("New position: " + ui.item.index());
    }
});

Puede ver una demostración en funcionamiento aquí , recuerde que el .index()valor está basado en cero, por lo que es posible que desee hacer +1 para mostrar.

No estaba muy seguro de dónde almacenaría la posición de inicio, así que quiero dar más detalles sobre el comentario de David Boikes. Descubrí que podía almacenar esa variable en el objeto ui.item y recuperarla en la función de detención de la siguiente manera:

$( "#sortable" ).sortable({
    start: function(event, ui) {
        ui.item.startPos = ui.item.index();
    },
    stop: function(event, ui) {
        console.log("Start position: " + ui.item.startPos);
        console.log("New position: " + ui.item.index());
    }
});

Usar actualización en lugar de detener

http://api.jqueryui.com/sortable/

actualización (evento, ui)

Tipo: sortupdate

Este evento se activa cuando el usuario dejó de ordenar y la posición del DOM ha cambiado.

.

detener (evento, ui)

Tipo: sortstop

Este evento se desencadena cuando se detiene la clasificación. Tipo de evento: Evento

Pieza de código:

http://jsfiddle.net/7a1836ce/

<script type="text/javascript">

var sortable    = new Object();
sortable.s1     = new Array(1, 2, 3, 4, 5);
sortable.s2     = new Array(1, 2, 3, 4, 5);
sortable.s3     = new Array(1, 2, 3, 4, 5);
sortable.s4     = new Array(1, 2, 3, 4, 5);
sortable.s5     = new Array(1, 2, 3, 4, 5);

sortingExample();

function sortingExample()
{
    // Init vars

    var tDiv    = $('<div></div>');
    var tSel    = '';

    // ul
    for (var tName in sortable)
    {

        // Creating ul list
        tDiv.append(createUl(sortable[tName], tName));
        // Add selector id
        tSel += '#' + tName + ',';

    }

    $('body').append('<div id="divArrayInfo"></div>');
    $('body').append(tDiv);

    // ul sortable params

    $(tSel).sortable({connectWith:tSel,
       start: function(event, ui) 
       {
            ui.item.startPos = ui.item.index();
       },
        update: function(event, ui)
        {
            var a   = ui.item.startPos;
            var b   = ui.item.index();
            var id = this.id;

            // If element moved to another Ul then 'update' will be called twice
            // 1st from sender list
            // 2nd from receiver list
            // Skip call from sender. Just check is element removed or not

            if($('#' + id + ' li').length < sortable[id].length)
            {
                return;
            }

            if(ui.sender === null)
            {
                sortArray(a, b, this.id, this.id);
            }
            else
            {
                sortArray(a, b, $(ui.sender).attr('id'), this.id);
            }

            printArrayInfo();

        }
    }).disableSelection();;

// Add styles

    $('<style>')
    .attr('type', 'text/css')
    .html(' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }')
    .appendTo('head');


    printArrayInfo();

}

function printArrayInfo()
{

    var tStr = '';

    for ( tName in sortable)
    {

        tStr += tName + ': ';

        for(var i=0; i < sortable[tName].length; i++)
        {

            // console.log(sortable[tName][i]);
            tStr += sortable[tName][i] + ', ';

        }

        tStr += '<br>';

    }

    $('#divArrayInfo').html(tStr);

}


function createUl(tArray, tId)
{

    var tUl = $('<ul>', {id:tId, class:'sortableClass'})

    for(var i=0; i < tArray.length; i++)
    {

        // Create Li element
        var tLi = $('<li>' + tArray[i] + '</li>');
        tUl.append(tLi);

    }

    return tUl;
}

function sortArray(a, b, idA, idB)
{
    var c;

    c = sortable[idA].splice(a, 1);
    sortable[idB].splice(b, 0, c);      

}
</script>

Según la documentación oficial de la interfaz de usuario ordenable de jquery: http://api.jqueryui.com/sortable/#method-toArray

En caso de actualización. utilizar:

var sortedIDs = $( ".selector" ).sortable( "toArray" );

y si alerta o consuela esta var (sortedIDs). Obtendrás tu secuencia. Elija como "Respuesta correcta" si es la correcta.