wake-up-neo.com

Sortierbare Position der jQuery-Benutzeroberfläche

Wie kann ich verfolgen, an welcher Position sich ein Element befindet, wenn sich seine Position in einer sortierbaren Liste ändert?

143
Jiew Meng

Sie können das ui -Objekt verwenden, das für die Ereignisse bereitgestellt wird. Insbesondere möchten Sie das stop -Ereignis , die ui.item - Eigenschaft 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 Wert von .index() auf Null basiert, und Sie möchten möglicherweise +1 für Anzeigezwecke.

289
Nick Craver

Ich war mir nicht ganz sicher, wo ich die Startposition speichern würde, deshalb möchte ich auf David Boikes Kommentar näher eingehen. Ich habe festgestellt, dass ich diese Variable im Objekt ui.item selbst speichern und in der Stoppfunktion wie folgt abrufen kann:

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

Verwenden Sie update anstelle von stop

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

update (event, ui)

Typ: sortupdate

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

.

stop (event, ui)

Typ: Sortierstopp

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>
14
user3439968

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 warnen oder trösten (sortierte IDs). Du bekommst deine Sequenz. Bitte wählen Sie als "Richtige Antwort", wenn es eine richtige ist.

4
rahim.nagori