Question

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

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

从我所理解的阅读文档开始，没有开箱即用的解决方案可以做到这一点，但也许一个选项可能是获得被拖动的元素被丢弃的'真正的'最高div。如果是溢出的div，请避免动作。（这只是一个想法）。

换句话说，我说有一个名为 droppable-div 的可放置div，一个位于其上方的div，名为 on-top-non-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.
}

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

JQueryUI draggable / droppable获得最高级别的div

1 个答案: