jQuery sortable with droppable - index not updated

Question

EDIT:

I found that in the drop function, ui.draggable.index() gives me the new index of the dropped slide. Is there a way I can pass this index to the sortable?

ui.draggable.hide("slow",function() {
            $(this).appendTo(dropList).show("slow");
            console.log(ui.draggable.index())  //correct index
});

---

I've an angular app in which I'm using jQuery UI to drag and drop slides. I'm using Sortable and Droppable together.

I'm trying to get the index of the draggable element that was dropped on to the droppable. However, I'm not getting the updated index of the newly dropped element; I always get the old index.

I do get the updated index of the element when I drag and drop it from one sortable to another.

I could use 'receive' event in the sortable, but that does not fire when I drop the element on the droppable. It fires only when I drop an element from one sortable to another sortable (as expected).

Please do take a look and help me out, I've been breaking my head over it for a whole day!!!

The fiddle: http://jsfiddle.net/sriramr/UK5FP/4/

The JS:

function SortableCTRL($scope) {
$scope.data = [{"title":"sub1","id":123},{"id":124,"title":"sub2"}];

$scope.sortableArray = [
    'One', 'Two', 'Three'
];
setTimeout(function() {
    $('.sortable').sortable({
        connectWith:'.sortable',
        stop:function(e,ui) {
             console.log(ui.item.index())   
        }
    });
    $(".cont").droppable({
    drop:function(event,ui) {
        var curr = $(this);
        var newId = "disp"+(curr.attr("id"))
        var newElem = $("#"+newId)
        var dropList = newElem.find(".sortable")
        ui.draggable.hide("slow",function() {
            $(this).appendTo(dropList).show("slow");
        });
    }
  });
});

}

Answer 1

I found the problem. I was using .hide() and .show() animations with "slow" as the args. So that must have taken a few more microseconds for the final update in the newly dropped list. Modifying the code this way works:

http://jsfiddle.net/sriramr/UK5FP/7/

ui.draggable.hide("fast",function() {
            $(this).appendTo(dropList).show("slow");
        });

and adding a 500 ms delay in the sortable stop fn:

stop:function(e,ui) {
            setTimeout(function() {
                console.log(ui.item.index())    
            },500)
        }

I'm not sure if its a good idea to introduce a 500ms delay but its currently the only workaround I've.