Question

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

有人可以为此建议解决方法吗？我试图在拖动开始时移除边距，但是当你第一次抓住它时，这会导致拖动时出现奇怪的跳跃。

$(".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

我调查了这个问题，我相信你需要删掉保证金（在它上面的元素上做保证金底部）或者在这种情况下用monkeypatch jQuery ui代码来计算保证金。

我在这个小提琴中移动了droppable的容忍度：http://jsfiddle.net/wQvWK/2/ 在我这样做之前，它从未放弃过。

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

Answer 2

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

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/

JQuery可拖动的交叉被边缘抛出

2 个答案: