How to find index of div which is dropped on droppable div

Question

I have drag and drop functionality in which I drag div and dynamically drop on droppable area. I have sortable functionality in droppable area, So I want to find out indexing so that after sorting I have to find out exact index position of a particular div. here is my code

$('#workArea').sortable({cancel: ':input,button,.common'});
$(".drags").draggable({
  helper : "clone",
  connectWith: '.workArea'
});
$(".workArea").droppable({
  drop: function( event, ui ) {
    function createHead(workspace){
      var head = document.createElement("div");
    }
  // [editor] i think i am missing a } here or pasted something wrong
});

Answer 1

jQuery provides the .index() method,

the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

Read more about .index()

Answer 2

It seems to me that the best place to return your new index will be via your sorting function.

Updating the index in a global array might help too. Then search for your specific div element in array after you have called your sort function.

In JS you can always use this.target is the element you are dropping and then using
$(this.target).index() and finding it with $("#parentContainer div:eq(" + newIndex + ")")

Hope this helps.