JQueryUI 可拖动/可放置获取最上面放置的 div

Question

我遇到了一个问题，我偶然发现的这个小提琴最能说明问题：

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

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

根据我阅读文档的理解，没有开箱即用的解决方案可以做到这一点，但也许一个选项可以是获取拖放元素所在的“真实”最上面的 div 并且如果是溢出的 div，请避免操作。 （虽然这只是一个想法）。

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

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.
}

Answer 1

也许这符合您的需求：

$(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"
                });
            }
        }
    });
});

DEMO

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

DEMO