JQuery 可拖动相交被边距抛弃

Question

我有一个具有较大边距和相交容差的可拖动对象。当我将它拖到可放置的框中时，大多数时候它都可以工作。但是，如果我尝试将其放置在可放置框的顶部附近，它不会正确放置，因为边距是作为高度的一部分计算的。

有人可以建议解决此问题的方法吗？我尝试在拖动开始时删除边距，但这会导致当您第一次捕获可拖动对象时会出现奇怪的跳跃。

$(".draggable").draggable({
    helper: 'clone',
    cursor: 'move'
})

$( ".droppable" ).droppable({
tolerance: 'intersect',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}})

http://jsfiddle.net/wQvWK/6/

Answer 1

这是一种方法。跌落测试是手动编码的，以便与您设置的边距一起使用。

var marginTop = 150;
$(".draggable").draggable({
        helper: 'clone',
        cursor: 'move',
        stop: function(event, ui){
            if($('.droppable').position().top-$(this).height()/2 < ui.position.top+marginTop
              && $('.droppable').position().top+$('.droppable').height() > ui.position.top+marginTop+$(this).height()-$(this).height()/2
              && $('.droppable').position().left-$(this).width()/2 < ui.position.left
              && $('.droppable').position().left+$('.droppable').width() > ui.position.left+$(this).width()-$(this).width()/2) 
               {
                $('.droppable')
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
            }
        }
    });

示例:

http://jsfiddle.net/trevordowdle/wQvWK/5/