Getting the values of elements that have been dropped on eachother with jQuery?

Question

I have the following jQuery:

  $(document).ready(function(){
    $(".element").draggable();
    $(".element").droppable({
      drop: function() { 
     alert('dropped');
      }
    });
  });

Anything with the class of 'element' can be manipulated and dragged around the page. I want to be able to find the html contents of the element that is being dragged and the element that is being dropped and use them where "alert('dropped');" is, so I could do something like:

alert(firstelement+ ' was dropped on ' +secondelement);

Any Ideas?

Answer 1

You need to add parameters to your drop callback.

drop : function(event, ui) {
   var droppable = $(this);
   var draggable = ui.draggable;

   alert(droppable.attr('id') + " was dropped on " + draggable.attr('id'));
}

http://jqueryui.com/demos/droppable/#event-drop