Question

Let’s say I have a sortable list like this:

$(".song-list").sortable({
  handle : '.pos_handle',
  axis : 'y',
  opacity: 0.6,
  update : function () {
    var id = $(this).index();
    console.log("Moved to new position: " + id);
  }
});

When you move the list, it should update in console with the new position. The .pos_handle has no ID.. only the class.

How would I get the index of it’s new moved-to position?

Answer 1

Use the prepared ui object’s .item property to reference the current element being moved:

update : function (event, ui) {
    console.log("Moved to new position: " + ui.item.index());
}

Fiddle

jQuery UI Reference