Sortierbare Position der jQuery-Benutzeroberfläche

Wie verfolge ich die Position eines Elements, wenn sich seine Position in einer sortierbaren Liste ändert?

Sie können das uifür die Ereignisse bereitgestellte Objekt verwenden, insbesondere das stopEreignis , die ui.itemEigenschaft und .index()wie folgt:

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

Sie können hier eine funktionierende Demo sehen. Denken Sie daran , dass der .index()Wert auf Null basiert. Daher möchten Sie möglicherweise zu Anzeigezwecken +1 verwenden.

Ich war mir nicht ganz sicher, wo ich die Startposition speichern würde, deshalb möchte ich auf den Kommentar von David Boikes eingehen. Ich fand heraus, dass ich diese Variable im Objekt ui.item selbst speichern und in der Stoppfunktion wie folgt abrufen konnte:

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

Verwenden Sie Update anstelle von Stop

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

Update (Ereignis, UI)

Typ: sortupdate

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Sortierung beendet hat und sich die DOM-Position geändert hat.

.

stop (event, ui)

Typ: sortstop

Dieses Ereignis wird ausgelöst, wenn die Sortierung gestoppt wurde. Ereignistyp: Ereignis

Stück Code:

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>

Gemäß der offiziellen Dokumentation der jquery sortierbaren Benutzeroberfläche: http://api.jqueryui.com/sortable/#method-toArray

Im Update-Ereignis. verwenden:

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

und wenn Sie diese Variable alarmieren oder trösten (sortierte IDs). Sie erhalten Ihre Sequenz. Bitte wählen Sie als "Richtige Antwort", wenn es eine richtige ist.