jQuery Forum

I want the ids of the draggable divs to show up as a comma separated list in the alert button if they were dropped into the droppable_box. Instead there is an alert for each dragged div one after the other instead of as one list. 

<script type="text/javascript">

   $(document).ready(function(){

    $( "#draggable1" ).draggable({ grid: [ 20,20 ] });

    $( "#draggable2" ).draggable({ grid: [ 20,20 ] });

$( "#draggable3" ).draggable({ grid: [ 20,20 ] });

 

        $( "#droppable_box" ).droppable({

  

            drop: function( event, ui ) {

        var currentId = $(ui.draggable).attr('id');

var stuff = [];

$.each($(ui.draggable), function(i,e) {

  stuff.push(e.id);

});

var energy = stuff.join(", ");

var data = "X-Requested-With=XMLHttpRequest";

$('#myId').click(function(){

$.post (

"process.php",

data,

function(data)

{

alert(energy);

},

'html'

);

});

}

});

});

</script>

In the html there are 3 draggable divs

<div id="draggable1" class="draggable_meal"></div>

<div id="draggable2" class="draggable_meal"></div>

<div id="draggable3" class="draggable_meal"></div>