jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在排序更改事件期间更新排序顺序 – jQuery UI大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望list元素的值是sort事件期间排序位置的索引.

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

<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不离开(在单个排序事件期间),值不会相应更新.

我错过了什么?

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

解决方法

试试这个:

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

@H_801_40@

大佬总结

以上是大佬教程为你收集整理的在排序更改事件期间更新排序顺序 – jQuery UI全部内容,希望文章能够帮你解决在排序更改事件期间更新排序顺序 – jQuery UI所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。