Question

In my script I’m experimenting with jquery draggable & droppable, See here. I’m trying to grab the data (to eventually put in a database) from each draggable element that’s dropped into the droppable div. Right now I have it so that I can only get the data from the div the was last dropped.

    $('#sortcard, #dropbox, #dropbox1').droppable({
        accept: '.sorting',
        hoverClass: 'border',
        tolerance: 'touch',
        drop: function(e, ui) {
          $(this).append(ui.draggable.html() + '<br/>');
          $("#add_friend").show().fadeOut(12000);
          $(e.target).droppable("disable");
          $(e.target).append("<input type='button' name='Sub' value='clear'/>").click(function() {
            $(this).empty().droppable("enable");
             });

            var dropbox = $('#dropbox').html();
            var dropbox1 = $('#dropbox1').html();

            if(dropbox && dropbox1 !== '') {
                 $.post("account_main.php", {data: $(this).text()}, function(data) {
                    $('#demo').html(data);
                });     
             }
          }
      });

I’m thinking the culprit may be

{data: $(this).text()}, function(data) {
    $('#demo').html(data);
});     

I have toyed with it and still not getting the results I desire. I feel maybe my coding on this is sketchy and needs a makeover, but I just need some ideas to push me in the right direction to make it efficient and would be very appreciative as well of any tips.

Answer 1

You’re only getting the data from the last droppable because your sending $(this).text().

In that context $(this) is the last droppable that was dropped. Since you want more than that, you’ll want to replace:

{data: $(this).text()}

with something like:

{
    sortcard: $('div#sortcard').text(),
    dropbox: $('div#dropbox').text(),
    dropbox1: $('div#dropbox1').text()
}

Which will send the data from those three DIVs.