JQuery sortable get .index() before and after sorting

jqueryjquery-uijquery-ui-sortable

I am using jQuery's sortable on a tagging plugin,
The plugin maintains an array of objects that relate to the li's in the same order as the actual items.

I need to update the order of the items in the array when the sorting finishes.

I thought I would just be able to in the start event call $(ui).index() and in the update event call the same which would give me the initial position, and the final position, but both calls return -1.

How should I do this?

Structure:

<ul>
<li>here<a class="close">x</a></li>
<li>are<a class="close">x</a></li>
<li>some<a class="close">x</a></li>
<li>tags<a class="close">x</a></li>
</ul>

Array Structure:

[{
    label: 'here',
    value: 36,
    element: '$(the li that this info is about)',
    index: 0
},
{
    label: 'are',
    value: 42,
    element: '$(the li that this info is about)',
    index: 1
},
{
    label: 'some',
    value: 21,
    element: '$(the li that this info is about)',
    index: 2
},
{
    label: 'tags',
    value: 26,
    element: '$(the li that this info is about)',
    index: 3
}]

JavaScript:

$('ul').sortable({
    start: function(event, ui){...},
    update: function(event, ui){...}
});

Best Answer

$(function() {
    $( "#sortable" ).sortable({
        update: function(event, ui) { 
            console.log('update: '+ui.item.index())
        },
        start: function(event, ui) { 
            console.log('start: ' + ui.item.index())
        }
    });
    $( "#sortable" ).disableSelection();
});
Related Topic