jQuery UI Sortable, how to determine current location and new location in update event?

Question

I have:

<ul id="sortableList">
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
</ul>

I have wired into the update: function(event, ui) { } but am not sure how to get the original and new position of the element. If i move item 3 to be above item 1, I want the original position to be 2 (0 based index) and the new position of item 3 to be 0.

The last answer from Richard with least number of upvotes is the best and cleanest solution, especially when you are using AngularJS or any other MVC frameworks where you dont want to read a custom attribute inside your controller! — Nishanth Nair, Nov 01 '13 at 11:52

Rush Frisby · Accepted Answer · 2012-10-26T14:17:13.677

102

$('#sortable').sortable({
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        $(this).removeAttr('data-previndex');
    }
});

edited Oct 26 '12 at 14:17

answered Dec 09 '11 at 05:17

Rush Frisby

11,388
19
63
83

You can use `ui.item.data('previndex')` also – adamj Mar 27 '17 at 01:18

score 18 · Answer 2 · edited Jun 28 '13 at 10:46

18

When the update function is invoked the ui.item.sortable has not been updated, however the UI element has visually moved.
This allows you in the update function to get old position and new position.

   $('#sortable').sortable({    
        update: function(e, ui) {
            // ui.item.sortable is the model but it is not updated until after update
            var oldIndex = ui.item.sortable.index;

            // new Index because the ui.item is the node and the visual element has been reordered
            var newIndex = ui.item.index();
        }    
});

edited Jun 28 '13 at 10:46

kameny

2,372
4
30
40

answered Jun 28 '13 at 10:24

Richard Friedman

932
7
11

This is the best answer and the cleanest solution! Thanks Richard! – Nishanth Nair Nov 01 '13 at 11:50
7

Doesn't work on jQuery 1.7, jQuery UI 1.8 - although this solution sounds very promising – user1702401 Nov 12 '13 at 13:36
To be specific: ui.item.sortable.index doesn't exist; and ui.item.sortable().index() returns allready updated index. – user1702401 Nov 12 '13 at 13:41
2

For me `ui.item.sortable.index` & `ui.item.index()` both were returning same integer. I started using `ui.item.sortable.dropindex` to obtain the new index – Mudassir Ali Nov 10 '15 at 12:06

Frankie · Answer 3 · 2009-10-23T16:39:39.150

10

You have several possibilities to check the old and the new position. I would put them into arrays.

$('#sortable').sortable({
    start: function(e, ui) {
        // puts the old positions into array before sorting
        var old_position = $(this).sortable('toArray');
    },
    update: function(event, ui) {
        // grabs the new positions now that we've finished sorting
        var new_position = $(this).sortable('toArray');
    }
});

And you can then easily extract what you need.

edited Oct 23 '09 at 16:39

answered Oct 21 '09 at 17:34

Frankie

24,627
10
79
121

list items must have IDs. otherwise it generates empty array – Atara Nov 23 '17 at 13:08

score 6 · Answer 4 · answered Nov 25 '14 at 12:48

6

This worked for me

$('#sortable').sortable({
start: function(e, ui) {
    // puts the old positions into array before sorting
    var old_position = ui.item.index();
},
update: function(event, ui) {
    // grabs the new positions now that we've finished sorting
    var new_position = ui.item.index();
}
});

answered Nov 25 '14 at 12:48

nicmwenda

139
1
3

This worked for me! It's worth noting that if you need to reference old_position within update() just declare it before the sortable. – nick Apr 24 '15 at 09:47

score 6 · Answer 5 · edited Dec 03 '11 at 17:35

I was looking for an answer to the same issue. based on what Frankie contributed, I was able to get both the start and end "orders". I had an issue with variable scope using the var, so I just stored them as .data() instead of local vars:

$(this).data("old_position",$(this).sortable("toArray"))

and

$(this).data("new_position",$(this).sortable("toArray"))

now you can call it up like this (from the update/end functions):

console.log($(this).data("old_position"))
console.log($(this).data("new_position"))

Credit still goes to Frankie :)

score 2 · Answer 6 · answered Mar 30 '16 at 13:32

This works for me,

$('#app').sortable({
    handle: '.handle',

    start: function(evt, ui){
        $(ui.item).data('old-ndex' , ui.item.index());
    },

    update: function(evt, ui) {
        var old_index = $(ui.item).data('old-ndex');
        var new_index = ui.item.index();

        alert('old_index -'+old_index+' new index -'+new_index);

    }
});

jQuery UI Sortable, how to determine current location and new location in update event?

6 Answers6

Linked