5

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?

Eric C
  • 2,195
  • 1
  • 17
  • 23
PushCode
  • 1,419
  • 3
  • 15
  • 31
  • You are only moving the position of the div, not changing the order. I recommend using `.sortable()` since you are already using jQuery. http://jqueryui.com/sortable/#connect-lists – Dom Feb 01 '13 at 16:14
  • 2
    Side note: please use `console.log()` rather than `alert()`. Seeing 30 alerts makes me want to punch someone in the face. http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it – Dom Feb 01 '13 at 16:16
  • I am just using this for testing. I'll use your suggestion. Thanks for it. – PushCode Feb 01 '13 at 18:16

2 Answers2

8

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

Silagy
  • 3,053
  • 2
  • 27
  • 39
  • 1
    Thanks for your inputs guys. I got to change my whole logic from draggable/droppable to use sortable. I got the solution much quicker here than the msdn blog. – PushCode Feb 01 '13 at 17:03
  • I am bit confused here while I am working in this issue. My **Dropped()** function is calling twice here: http://jsbin.com/axegem/15/ – PushCode Feb 01 '13 at 18:01
  • I have looked at your code and i don't see where it is calling twice. Am i missing something? – Silagy Feb 01 '13 at 18:54
  • I tried in both IE and firefox. When I drag and drop a DIV, I can see "Dropped" alert twice. – PushCode Feb 01 '13 at 19:15
  • I noticed a weird behavior. When you drop **Div 3** under **Div 6**, you see the "Dropped" alert twice. If you drop **Div 5** under **Div 6**, you see it only once. Why is that so? – PushCode Feb 01 '13 at 19:31
  • i have some elements in each div, and one of them is a span element that contain the "move" image, so this way i want drag to function only within span, and not anywhere on the div body. how can i work this out ? thank you – armen Oct 03 '14 at 08:55
  • 1
    @armen - look at this link http://api.jqueryui.com/sortable/#option-handle you can use handle to achieve that – Silagy Oct 04 '14 at 09:54
3

The problem about draggable is that all it does is move items around in a free space and doesn't concern itself with ordering. Droppable can help, but that's more concerned with figuring out if an object is inside of a container.

Instead of using draggable and droppable, try sortable. It makes things like setting sort order of items incredibly simple. That and you no longer have to worry about it fitting in the proper order either.

Check out this: http://jsbin.com/axegem/6/

Eric C
  • 2,195
  • 1
  • 17
  • 23