如何使拖动的元素时，在可投放区域

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的UI

$('.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(); 
})