Question

I have place my sample at the below location : http://jsbin.com/axegem/1

Here is the scenario. When I drag the divs and drop them on to another place, I need to retrieve the new order of the divs. For example, lets say (with respect to my sample), I dragged and dropped DIV 3 after DIV 6. Now I am trying to get the new order of the divs. For testing, I am alerting their html text in the following code:

$(".draggable").each(function(){
  alert($(this).html());
});

I am expecting the alert order to be: DIV 1, DIV 2, DIV 4, DIV 5, DIV 6, DIV 3, DIV 7, DIV 8, DIV 9. But what I get in the sample is DIV 1, DIV 2, DIV 3, DIV 4, DIV 5, DIV 6, DIV 7, DIV 8, DIV 9.

How can I get the new order of the divs after dropping them in a new location?

Answer 1

I have change a little your code to fit your needs.

I have change to using Sortable functionality, that’s because you have used the draggable the only drug not sort elements.

When you use the Sortable it will be easily to get the sorted elements

$(document).ready(function() {
    $('#divOuter2').css("margin","-540px 0 0 400px");
    $('#divOuter3').css("margin","-540px 0 0 800px");

    $(".droppable").sortable({
      update: function( event, ui ) {
        Dropped();
      }
    });



  });



    function Dropped(event, ui){
      $(".draggable").each(function(){
        //var p = $(this).position();
        alert($(this).html());
      });
      refresh();
    }

I have set the DOM element with class .droppable as sortable.

Then on Update Event i am calling your function Dropped

See Example