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

Question

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();

question from:https://stackoverflow.com/questions/65939022/jquery-ui-sortable-draggable-get-current-index-of-the-dragged-item

Answer 1

Use a data attribute in the div to hold the index. Use the on onDrag and onDrop events to renumber the data attribute for each div within the container. Then return the new index number.