jquery ui sortable + draggable get current index of the dragged item

I want to get the current index of the dragged item. Image attached of the scenario.

First I drag the div to the master container then I have to get the index from master container ie is 0.

Then I drag the same element to the child container then I need to get the index from the child container ie is 1.

I have added this Fiddle to show how my code is right now.

('.container').sortable({
connectWith: '.container',
 scroll: false,
    zIndex: 10000,
    placeholder: "control-placeholder",
    receive: function(event, ui){
      var id = event.target.id;
     alert(id);
     },});

 $( "#container1, #container2" ).draggable({
  connectToSortable: ".container",
  helper: "clone",
  revert: "invalid",
});


$( ".container" ).disableSelection();

enter image description here

81 thoughts on “jquery ui sortable + draggable get current index of the dragged item”