jQuery UI Sortable - update item data-id attribute

Question

Suppose I have the following sortable object:

<ul class="photos ui-sortable">
    <li class="photo" data-id="1"></li>
    <li class="photo" data-id="2"></li>
    <li class="photo" data-id="3"></li>
    <li class="photo" data-id="4"></li>
    <li class="photo" data-id="5"></li>
    <li class="photo" data-id="6"></li>
</ul>

Upon sorting, the data-id attribute of all the items need to be updated with their new positions.

I tried this:

$('.photos').sortable({
    stop: function(event, ui){
        $(ui.item).attr('data-id', ui.item.index()+1);
    }
});

But it only updates the data-id of the item that was moved, and not the others. How can I do this?

Just out of curiosity, why do you need to do this? The items are indexed by their order in the DOM... — David Barker
– David Barker, Commented Jul 25, 2014 at 14:58

billyonecan · Accepted Answer · 2014-07-25 15:11:55Z

15

Use the update event, inside of there just loop over each .photo and set the data-id according to its current index:

$('.photos').sortable({
    update: function(event, ui) {
        $('.photo').each(function(i) { 
           $(this).data('id', i + 1); // updates the data object
           $(this).attr('data-id', i + 1); // updates the attribute
        });
    }
});

Here's a fiddle

edited Jul 25, 2014 at 15:11

answered Jul 25, 2014 at 14:54

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

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

6 Comments

Runcorn Over a year ago

Yes it does , he just haven't updated the data attribute .. in fiddle

fossman83 Over a year ago

@Runcorn My bad I see, nice job

Geee Over a year ago

This is nice solution. But what if I remove(delete) any list item. Suppose i drop 5 item in the droppable list (Having data-id='1'...so on) and delete forth element. How to re-arrange ids?

billyonecan Over a year ago

just trigger sortable's update function when the item is deleted

billyonecan Over a year ago

@Nathan that's because in the fiddle only the data object is being updated. jQuery uses the attribute to populate the data object initially, after which there's no association between the two. Here's a fiddle where the attribute is also updated: jsfiddle.net/sk3r8fae

|

Runcorn · Accepted Answer · 2014-07-25 14:58:42Z

4

You are using the stop method ui which returns current item on move. So basically you have to iterate through all the items and manually put the data attribute value ,

$('.photos').sortable({
    stop: function(event, ui){
        $(".ui-sortable li").each(function(i, el){
               $(el).prop('data-id',$(el).index()+1);
        });
    }
});

And here is the Working Fiddle

answered Jul 25, 2014 at 14:58

Runcorn

5,2245 gold badges37 silver badges52 bronze badges

Collectives™ on Stack Overflow

jQuery UI Sortable - update item data-id attribute

2 Answers 2

Here's a fiddle

6 Comments

And here is the Working Fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

And here is the Working Fiddle

Comments

Your Answer

Sign up or log in

Post as a guest

Related