Updating sort order during sort change event - jQuery UI

I want the value of the list element to be the index of the sorted position during sort event.

This value should update automatically during sort change event.

        <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>

I created a fiddle http://jsfiddle.net/jagan2explore/4mcpq/

to explain my requirement.

If i move 1'st element to 5th position all other elements values are updated rightly, If i move 5th to 1'st the value updates accordingly.

Suppose if i move a list element from 1 to 5 & from 5 to 2 without leaving (during single sort event ), the values are not updated accordingly.

Am i missing something??

Any help would be greatly appreciated. Thanks in advance

Answers


Try this:

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);
        }
    }
},

Demo: jsfiddle


Need Your Help

Online Java Thread dump analyzer

java web-services parsing thread-dump

I often use Java Thread Dumps for post-mortems and server slowdown analysis. The problem is that the thread dumps are often long, and understanding the concurrency relationship between the threads ...

Matplotlib exiting error

python matplotlib

Consider the following simple python code:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.