jQuery UI Posisi Dapat Diurut

Bagaimana cara melacak posisi elemen saat posisinya dalam daftar yang dapat disortir berubah?

Anda dapat menggunakan uiobjek yang disediakan untuk acara, khususnya yang Anda inginkan stopacara , ui.itemproperti dan .index(), seperti ini:

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

Anda dapat melihat demo yang berfungsi di sini , ingat .index()nilainya berbasis nol, jadi Anda mungkin ingin memberi +1 untuk tujuan tampilan.

Saya tidak yakin di mana saya akan menyimpan posisi awal, jadi saya ingin menguraikan komentar David Boikes. Saya menemukan bahwa saya bisa menyimpan variabel itu di objek ui.item itu sendiri dan mengambilnya dalam fungsi berhenti sebagai berikut:

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

Gunakan pembaruan alih-alih berhenti

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

pembaruan (acara, ui)

Ketik: sortupdate

Peristiwa ini dipicu ketika pengguna berhenti menyortir dan posisi DOM telah berubah.

.

berhenti (acara, ui)

Ketik: sortstop

Acara ini dipicu ketika pengurutan telah berhenti. Jenis acara: Peristiwa

Sepotong kode:

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>

Sesuai dokumentasi resmi UI sorting jquery: http://api.jqueryui.com/sortable/#method-toArray

Dalam acara pembaruan. menggunakan:

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

dan jika Anda mengingatkan atau menghibur var ini (diurutkan ID). Anda akan mendapatkan urutan Anda. Silakan pilih sebagai "Jawaban Benar" jika itu adalah jawaban yang benar.