Question

I want to create a sortable image gallery using Jquery UI Sortable. Until here, works fine.

Inside each tag, I need to store the order of each image in the gallery. But this order must be updated when an image is moved.

Example: I have five images:

<ul id="sortable">
  <li id="1" value="1">image 1</li>
  <li id="2" value="2">image 2</li>
  <li id="3" value="3">image 3</li>
  <li id="4" value="4">image 4</li>
  <li id="5" value="5">image 5</li>
</ul>

If I move the image 4 after image 5, the order values ​​should not be changed. That is, the image 5 has the value 4 and the image 4 has the value 5.

This is possible?

Answer 1

You could update the value in the event stop when the sort just ends. Something like this :

$("#sortable").sortable({
    stop: function(event, ui) {
        $(this).children("li").each(function(index) {
            $(this).attr("value", index);
        });
    }
});

Like this, you can save the new values on the server if you want to keep this display after a reload.

EDIT: correcting the way to set index thanks to marcelo2605