Posizione ordinabile dell'interfaccia utente jQuery

Come posso tracciare la posizione di un elemento quando cambia la sua posizione in un elenco ordinabile?

È possibile utilizzare l' uioggetto fornito agli eventi, in particolare si desidera l' stopevento , la ui.itemproprietà e .index(), in questo modo:

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

Puoi vedere una demo funzionante qui , ricorda che il .index()valore è basato su zero, quindi potresti voler fare +1 per scopi di visualizzazione.

Non ero sicuro di dove avrei memorizzato la posizione iniziale, quindi voglio approfondire il commento di David Boikes. Ho scoperto che avrei potuto memorizzare quella variabile nell'oggetto ui.item stesso e recuperarla nella funzione di arresto in questo modo:

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

Utilizzare aggiorna invece di interrompere

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

aggiornamento (evento, interfaccia utente)

Digitare: sortupdate

Questo evento viene attivato quando l'utente smette di ordinare e la posizione DOM è cambiata.

.

stop (evento, ui)

Tipo: sortstop

Questo evento viene attivato quando l'ordinamento si è interrotto. Tipo di evento: Evento

Pezzo di codice:

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>

Secondo la documentazione ufficiale dell'interfaccia utente ordinabile di jquery: http://api.jqueryui.com/sortable/#method-toArray

In caso di aggiornamento. uso:

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

e se avverti o consoli questo var (ordinati ID). Avrai la tua sequenza. Scegli come "Risposta giusta" se è una risposta corretta.