Как сделать перетаскивается элемент при падении должен находиться в центре сбрасываемой области

Question

У меня есть Div

<div class="row"> 
    <div class="col-xs-4 drop12"> 
    // content goes 
    </div> 
</div> 

<div class="row"> 
    <p class="col-xs-4 drag12"> 
    // content goes 
    </p> 
</div> 

Моя проблема заключается в том, как сделать перетаскивается элемент при падении в сбрасываемой области должна быть в центре сбрасываемой DIV с помощью JQuery-щ

$('.drag12').draggable(); 
$('.drop12').droppable(); 

Можно проверить в скрипку https://jsfiddle.net/fefcn9nm/1/

Answer 1

https://jsfiddle.net/fefcn9nm/6/

$(document).ready(function(){ 
    var offsetCenter; 

    $('.drop12').droppable(); 
    $('.drop12').on('drop', function(event, ui) { 
    var $divDrop = $(this); 
    offsetCenter = { 
     top: $divDrop.offset().top + $divDrop.height()/2, 
     left: $divDrop.offset().left + $divDrop.width()/2 
    } 

    var diffLeft = offsetCenter.left - event.pageX, 
      diffTop = offsetCenter.top - event.pageY; 

     $(ui.draggable).css({ 
     left: parseInt($(ui.draggable).css('left')) + diffLeft, 
     top: parseInt($(ui.draggable).css('top')) + diffTop 
     }) 
    }); 

    $('.drag12').draggable(); 
})