Jquery ui drag drop droppable "drop" event

Question

When I make a div droppable and try to set a drop event function it doesn't fire:

$('.item').draggable({

});

$('.destination').droppable({
   drop: function(event, ui){
     console.log('hiii');
   }
});

It fires when I drop it outside- to the right of the $('.destination') div, but not if I drop it inside the '.destination' div. See the full JS fiddle: http://jsfiddle.net/dylanjha/8TFMS/5/

Answer 1

For some reason, setting the margin:0 auto on the .item class causes this to not function properly. Removing it fixes the issue.

jsFiddle example