0

我遇到了一个问题,我偶然发现的这个 Fiddle 最能说明问题:

http://jsfiddle.net/JSFU4/3/

也就是说,当我拖动一个对象并将其悬停在其可放置的对应物上时,即使它们之间有一个 div,也会检测到放置。我想避免这种情况。

根据我阅读文档的理解,没有开箱即用的解决方案可以做到这一点,但也许一个选项可能是获取拖放元素所在的“真实”最上面的 div 并避免在以下情况下采取行动这是溢出的div。(虽然这只是一个想法)。

换句话说,假设我有一个名为droppable-div的可放置 div,它上面的一个名为on-top-non-droppable-div 的 div ...我可以在 droppable-div 函数中检测到这个吗?

dropped: function(ev, ui){
    // somehow detect if the first target to receive the draggable event
    // is #on-top-non-droppable-div, and don't do anything if it is.
}
4

1 回答 1

4

也许这符合您的需求:

$(function () {
    $('.drag').draggable();
    $('.drop, .overlay').droppable({
        tolerance: 'touch',
        hoverClass: 'drop-hover',
        accept: '.drag',
        drop: function (event, ui) {
            if ($(this).hasClass('overlay')) {
                ui.draggable.draggable({
                    revert: true
                });
            } else {
                ui.draggable.draggable({
                    revert: "invalid"
                });
            }
        }
    });
});

演示

这里示例设置tolerance: 'pointer',

演示

于 2013-09-27T09:10:00.627 回答