如何使拖动的元素时,在可投放区域
问题描述:
中心回落应该是我有一个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/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();
})
+0
谢谢你的工作很好 – Surendra
你可以在这样的https://jsfiddle.net/上做出更详细的布局? –
嗨亚历山大滴p标签后,它应该在垂直和水平中心@AlexandrMalyita – Surendra