Question

I have a sortable list on my page. I would like to know just the user’s intension: what item he drags and where, i.e. old and new (potential) position of the dragged element.

But I DON’T want jQuery-sortable to actually change my DOM — I want to do it myself. Here is the example:

$(".sortable-list").sortable({
  items: ".sortable-item",
  stop: function (event, ui) {
    // prevent DOM changes
    $(this).sortable('cancel');
    // get the indices
    var oldIndex = $(this).find('.sortable-item').index(ui.item);
    var newIndex = 'how?'; // this is the question
  }
});

I know I can calculate new position using ui.originalPosition and ui.position, but I believe jQuery-sortable has already done this work since it puts a placeholder in a valid place, so I just want to get the value.

How do I do that?

Answer 1

Well, while I was writing a question I have actually found the solution.

It turns out that jQuery-sortable does change the DOM before I call $(this).sortable('cancel'). What this call actually does is reverting the changes plugin has done.

Here’s the working code:

$(".sortable-list").sortable({
  items: ".sortable-item",
  stop: function (event, ui) {
    var newIndex = $(this).find('.sortable-item').index(ui.item);
    $(this).sortable('cancel');  // revert changes
    var oldIndex = $(this).find('.sortable-item').index(ui.item);
  }
});