jQuery draggable + droppable: how to snap dropped element to dropped-on element

Question

I have my screen divided into two DIVs. In the left DIV I have a few 50x50 pixel DIVs, in the right DIV I have an empty g

Answer 1

I found that when you do the drag, jQuery UI adds an inline to tell you where you dropped it. Below is a sample of the code that I used to snap it into place

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped
    var draggedclass = ui.draggable.attr('class'),
        droppedclass = 'class' + $(this).attr('name').toLowerCase();

    //update the classes so that it looks od.       
    ui.draggable.removeClass(draggedclass).addClass(droppedclass);  
    ui.draggable.removeAttr('style');
});