CODEWITHSUNDEEP
jqueryjquery-ui-sortable
frgtv10
frgtv10

Reputation: 5460

Sortable get element index

I got this html code:

<div id="pages">
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <div id="page4"></div>
</div>

Just for testing I would like to show the elements index on sorting the grid:

$( "#pages" ).sortable({

    sort: function(event,ui){
        console.log($('#pages').index(ui.item));
    }
});

The returned index is the index where the dragged element was on starting the drag. If I move the code in the stop/update event, I receive the correct index. My problem is, that on dragging the visual notice (flip between other divs) is an other that the index returns and I need to change the css margins of the elements.

How to get the correct order while dragging the element?

TIA frgtv10

Upvotes: 0

Views: 3503

Answers (1)

Mordhak
Mordhak

Reputation: 2656

To access to the current index of the dragged item you need to use ui.placeholder item.

$( "#pages" ).sortable({
    helper: "clone",
    sort: function(event, ui) {
        console.log($(ui.placeholder).index());
    }
});

jsFiddle here (jQuery 1.8.2, jQueryUI 1.9.2)

Upvotes: 3

Related Questions