Centering Draggable Element in Dropable After Drop in jQuery UI

Centering Draggable Element in Dropable After Drop in jQuery UI

Can you please take a look at T his Demo and let me know how to force draggable element to be centered inside the droppable after drop?

  1. $(function () {
  2.     $('#draggable').draggable({});
  3.     $("#droppable").droppable({
  4.         drop: function (event, ui) {
  5.             $(this)
  6.                 .find("p")
  7.                 .html("Dropped!");
  8.                  $('#draggable').css("margin","2px");
  9.         }
  10.     });
  11. });

As you can see I already $('#draggable').css("margin","2px"); tried but this is not doing the job!

Thanks