在排序更改事件期间更新排序顺序 - jQuery UI答案

【问题标题】：Updating sort order during sort change event - jQuery UI在排序更改事件期间更新排序顺序 - jQuery UI
【发布时间】：2013-04-18 12:06:32
【问题描述】：

我希望列表元素的值是排序事件期间排序位置的索引。

此值应在排序更改事件期间自动更新。

        <script type="text/javascript">
        $(function() {
            $('#sortable').sortable({
                start : function(event, ui) {
                    var start_pos = ui.item.index();
                    ui.item.data('start_pos', start_pos);
                },
                change : function(event, ui) {
                    var start_pos = ui.item.data('start_pos');
                    var index = ui.placeholder.index();

                    if (start_pos < index) {
                        $('#sortable li:nth-child(' + index + ')').html(index-2);
                    } else {
                        $('#sortable li:eq(' + (index + 1) + ')').html(index + 1);
                    }
                },
                update : function(event, ui) {
                    var index = ui.item.index();
                    $('#sortable li:nth-child(' + (index + 1) + ')').html(index);

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


    </script>

我创造了一个小提琴 http://jsfiddle.net/jagan2explore/4mcpq/

解释我的要求。

如果我将第 1 个元素移动到第 5 个位置，则所有其他元素的值都会正确更新，如果我将第 5 位移到第 1 位，则值会相应更新。

假设如果我将列表元素从 1 移动到 5 并从 5 移动到 2 而不离开（在单排序事件期间），则值不会相应地更新。

我错过了什么吗？？

任何帮助将不胜感激。提前致谢

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

试试这个：

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) + ')').html(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 + ')').html(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 + ')').html(i-1);
        }
    }
},

演示：jsfiddle

【讨论】：

谢谢。这正是我需要的。请提供更多帮助。我可以选择使用 jQuery .remove() 方法删除任何列表元素。假设如果用户删除了第 3 个项目，我必须将剩余的项目更新为 3、4、5。任何想法如何做到这一点
@JaganK 您可以使用与重新编号相同的逻辑来更新已删除项目之后的项目。
百万感谢@Terence。我找到了一种使用您的代码执行此操作的方法。我是 jquery UI 的新手。再次感谢您的回答。
@Terence 我有什么自定义订单，需要保留它，就像我要订购一个从 80 到 90 的列表，我需要保留数字？
@Terence 非常感谢您使用精美的代码！

【解决方案2】：

我用另一种方法更新了你的小提琴，它似乎按预期工作：

            $(function() {
            $('#sortable').sortable({
                start : function(event, ui) {
                    var start_pos = ui.item.index();
                    ui.item.data('start_pos', start_pos);
                },
                change : function(event, ui) {
                    var start_pos = ui.item.data('start_pos');
                    var index = ui.placeholder.index();


                    cIndex = (start_pos < index) ? index-2 : index-1;
                    ui.placeholder.prevAll('li').each(function(){
                        $this = $(this);
                        if($this.is(ui.item)) {return;}
                        $this.html(cIndex);
                        cIndex--;
                    });

                    cIndex = (start_pos < index) ? index : index+1;
                    ui.placeholder.nextAll('li').each(function(){
                        $this = $(this);
                        if($this.is(ui.item)) return;
                        $this.html(cIndex)
                        cIndex++;
                    });

                    ui.item.html((start_pos < index) ? index-1 : index);
                },
                axis : 'y'
            });
        });

演示 Here's the fiddle !

【讨论】：