CODEWITHSUNDEEP
javascriptjquerydrag-and-droppositionjquery-ui-sortable
Wurlitzer
Wurlitzer

Reputation: 2919

Getting the position of the element in a list when it's drag/dropped (ui.sortable)

I have a sortable list like this one: http://jqueryui.com/demos/sortable

Is it possible to get the start and end position of the element in the list, when it has been moved? I'm talking about their position number, in the list.

For example, if I move element 2 to position 5 in the list, I'd like to assign those two numbers to variables.

I'm new to jQuery - any help would be much appreciated.

Upvotes: 15

Views: 13563

Answers (3)

Luca Filosofi
Luca Filosofi

Reputation: 31173

SOLUTION:

$(function() {
    $('ul#sortable').sortable({
        start: function(event, ui) {
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
        },
        update: function(event, ui) {
            var start_pos = ui.item.data('start_pos');
            var end_pos = ui.item.index();
            alert(start_pos + ' - ' + end_pos);
        }
    });
});
  • NOTE: Updated to make use of jQuery data() method under advice of Alconja

Upvotes: 33

Mark Kitz
Mark Kitz

Reputation: 33

For some reason ui.item.index() did not work for me.

This did:

update: function (event, ui) 
{
    var index = $('li', $(ui.item).parent()).index(ui.item);
    alert(index);
}

Upvotes: 1

SgtOJ
SgtOJ

Reputation: 589

I believe what you are looking to do is done with the serialize method. Serialize is get the new order of the list.

Upvotes: 1

Related Questions