Vị trí sắp xếp giao diện người dùng jQuery

Làm cách nào để theo dõi vị trí của một phần tử khi vị trí của nó trong danh sách có thể sắp xếp thay đổi?

Bạn có thể sử dụng uiđối tượng được cung cấp cho các sự kiện, cụ thể là bạn muốn stopsự kiện , thuộc ui.itemtính và .index(), như thế này:

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

Bạn có thể xem bản demo hoạt động ở đây , hãy nhớ .index()giá trị là dựa trên số không, vì vậy bạn có thể muốn +1 cho mục đích hiển thị.

Tôi không chắc chắn nơi tôi sẽ lưu trữ vị trí bắt đầu, vì vậy tôi muốn giải thích về nhận xét của David Boike. Tôi thấy rằng tôi có thể lưu trữ biến đó trong chính đối tượng ui.item và truy xuất nó trong hàm dừng như vậy:

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

Sử dụng cập nhật thay vì dừng

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

cập nhật (sự kiện, ui)

Loại: sắp xếp

Sự kiện này được kích hoạt khi người dùng dừng sắp xếp và vị trí DOM đã thay đổi.

.

dừng lại (sự kiện, ui)

Loại: sắp xếp

Sự kiện này được kích hoạt khi sắp xếp đã dừng. Loại sự kiện: Sự kiện

Đoạn mã:

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>

Theo tài liệu chính thức của UI sắp xếp jquery: http://api.jqueryui.com/sortable/#method-toArray

Trong sự kiện cập nhật. sử dụng:

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

và nếu bạn cảnh báo hoặc điều khiển var này (sortIDs). Bạn sẽ nhận được trình tự của bạn. Vui lòng chọn là "Câu trả lời đúng" nếu đó là câu trả lời đúng.