Snap draggable cloned element to <div> section

Can开发者_运维问答 anyone check this sample code and can help me in fixing the clone for the dragged element and it should snap to the nearest white block when interchanging the positions as without cloning it is snapping and I would like to how to do with a cloned element.

And if I am able to clone then i am unable to snap.So I will be grateful if anyone helps me out this issue.

Here is the sample code for snapping:

http://jsfiddle.net/kiran/qWPAH/7/

And this is how I did the cloning:

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

        var width = $this.width();
        var height = $this.height();
        var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
        var cntrTop = (height / 2) - (ui.draggable.height() / 2);

        ui.draggable.css({
            left: cntrLeft + "px",
            top: cntrTop + "px"
        });
    }
});

});

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

          var width = $this.width();
          var height = $this.height();
          var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
          var cntrTop = (height / 2) - (ui.draggable.height() / 2);

          ui.position.left = cntrLeft;
          ui.position.top = cntrTop ;
      }
   });

});