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

2023年9月9日 100次阅读

我有一个具有大边距和相交容差的可拖动.当我将它拖到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/

最佳答案 这是一种方法.下拉测试是手动编码的,以便使用您设置的边距.

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/

点赞