Question

我有一个使用可排序jquery的项目列表。每个项目都有一个值（第一，第二，第三），每个项目都有一个ID（1,2,3）

我想当用户首先移动到第三位时，第一个的id应该是3，第三个的id应该是1.我想要在值旁边显示id

示例：

第一-1
第二-2
第三-3

更改位置后

..

third-1
second-2
第一-3

这是我的javascript

$(function () {
    $('#sortable').sortable({
        //to prevent items from moving around when draging
        containment: "parent",
        start: function (event, ui) {
            // get the initial position(index) of item
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);

        },

        update: function (event, ui) {
            var index = ui.item.index();
            var start_pos = ui.item.data('start_pos');

            //update the html of the moved item to the current index
            $('#sortable li:nth-child(' + (index + 1) + ')').appendTo(index);

            if (start_pos < index) {
                //update the items before the re-ordered item
                for (var i = index; i > 0; i--) {
                    $('#sortable li:nth-child(' + i + ')').appendTo(i - 1);
                }
            } else {
                //update the items after the re-ordered item
                for (var i = index + 2; i <= $("#sortable li").length; i++) {
                    $('#sortable li:nth-child(' + i + ')').appendTo(i - 1);

                }
            }
        },
        axis: 'y'
    });
});

和我的HTML：

<div class="container">
    <ul id="sortable" class="ui-sortable">
        <li id="sort_1" class="ui-state-default">first -</li>
        <li id="sort_2" class="ui-state-default">second -</li>
        <li id="sort_3" class="ui-state-default">third -</li>
        <li id="sort_4" class="ui-state-default">fourth -</li>
        <li id="sort_5" class="ui-state-default">fifth -</li>
    </ul>
</div>

jQuery UI可排序并显示ID和值

0 个答案: