jQuery UI Sortable Position

146

Jak śledzić pozycję elementu, gdy zmienia się jego pozycja na liście z możliwością sortowania?

Jiew Meng
źródło

Odpowiedzi:

296

Możesz użyć uiobiektu dostarczonego do zdarzeń, konkretnie chcesz stopzdarzenie , ui.itemwłaściwość i .index()tak:

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

Możesz zobaczyć działające demo tutaj , pamiętaj, że .index()wartość jest od zera, więc możesz chcieć +1 do celów wyświetlania.

Nick Craver
źródło
60
Dodatkowo, jeśli chcesz śledzić, skąd pochodzi przeniesiony element (przejdź z pozycji 0 do pozycji 2), musisz uzyskać dostęp do wartości ui.item.index () w zdarzeniu początkowym i zapisać tę wartość.
David Boike,
Czy istnieje sposób na znalezienie identyfikatora div-id portletów z możliwością sortowania w #sortable div?
Frank
Ponadto, jeśli chcesz śledzić pozycję podczas przeciągania z sort, można użyć ui.placeholder.index. Indeks zaczyna się na pozycji 1.
Loïc Pennamen
127

Nie byłem do końca pewien, gdzie zapamiętam pozycję startową, więc chciałbym rozwinąć komentarz Davida Boikesa. Okazało się, że mogę przechowywać tę zmienną w samym obiekcie ui.item i pobrać ją w funkcji stop, tak jak to:

$( "#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());
    }
});
i_a
źródło
5
Ratujesz mój dzień! Sir pytanie, jak mogę zapisać nową pozycję za pomocą Ajax?
mrrsb
5
Dlaczego nie mają takiego prostego przykładu na sortowalnych stronach podręcznika systemowego? Naprawdę nie zdawałem sobie sprawy, że przedmioty z startmogą być w stopzasięgu, dopóki tego nie zobaczyłem.
Sablefoste
1
Nie rozumiem, dlaczego tak powszechna funkcjonalność nie jest częścią
sortowalnej
14

Użyj aktualizacji zamiast zatrzymania

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

aktualizacja (zdarzenie, interfejs użytkownika)

Wpisz: sortupdate

To zdarzenie jest wyzwalane, gdy użytkownik przestał sortować i zmieniła się pozycja DOM.

.

stop (zdarzenie, ui)

Typ: sortstop

To zdarzenie jest wywoływane po zatrzymaniu sortowania. Event Type: Event

Kawałek kodu:

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>
user3439968
źródło
4

Zgodnie z oficjalną dokumentacją interfejsu użytkownika z możliwością sortowania jquery: http://api.jqueryui.com/sortable/#method-toArray

W przypadku aktualizacji. posługiwać się:

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

i jeśli zaalarmujesz lub konsolujesz tę zmienną (sortowane ID). Otrzymasz swoją sekwencję. Wybierz właściwą odpowiedź jako „właściwą odpowiedź”.

rahim.nagori
źródło