Updating sort order during sort change event - jQuery UI

Question

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

Terence · Accepted Answer · 2013-04-18 12:54:20Z

17

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

answered Apr 18, 2013 at 12:54

Terence

1,3849 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jagan K Over a year ago

Thanks. This is exactly i need. Some more help please. i have the option to delete any list element using jQuery .remove() method. Suppose lets say if the user deletes 3rd item, I have to update the remaining items to 3,4,5. Any idea how to do this

Terence Over a year ago

@JaganK You can use the same logic that does the re-numbering to update the items after the item that was deleted.

Jagan K Over a year ago

A Million Thanks @Terence. I found a way to do this with your code. I am new to jquery UI. Thanks again for your answer.

Happy Coder Over a year ago

@Terence What is I have custom order and need to preserve it, like I am ordering a list from 80 to 90 and I need to keep the numbers ?

Gediminas Šukys Over a year ago

@Terence thank you for a great peace of beautifully working code!

Robin Leboeuf · Accepted Answer · 2013-04-18 15:07:39Z

I updated your fiddle with another approach, it seems to work as expected:

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

Demo Here's the fiddle !

Collectives™ on Stack Overflow

Updating sort order during sort change event - jQuery UI

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related