jQuery 可放置和可滚动的 div

Question

我对jQuery UI有一个小问题的可删除组件，但我不太确定是否由于我的代码或组件中的错误而出现该问题。

我有一个固定宽度和高度的div。该div的overflow-x设置为隐藏，overflow-y设置为auto。 在该 div 中我还有一些 div。它们太多了，以至于外部 div 开始滚动。每个内部 div 都是可放置的，接受包装器 div 外部的可拖动。

如果我将可拖动项目拖放到包装器内的某个位置，一切都会正常工作。问题是，如果我将元素放置在包装 div 下方不久，放置事件甚至会被触发。

我不太擅长解释这个问题；因此，这里有一些重现该问题的代码:

http://jsfiddle.net/2p56Y/

只需拖放“Drag Me!”带滚动条的 div 下方的容器。出乎意料的是，您会看到警报“已删除”。

现在有一些有趣的事情:如果您向下滚动到项目“Test28”，然后将可拖动对象拖放到包装器下方，则不会触发放置事件。看起来，当您将某些东西放在隐藏的元素上时，它们仍然可以访问。

那么，这是一个错误还是我需要以不同的方式编写代码才能使其工作？ (或两者兼而有之？:-) )

Answer 1

检查 droppable 元素相对于父容器的边界，如果 droppable 的底部高于父容器的顶部或 droppable 的顶部低于父容器的底部，则中断函数的执行:

$('.item').droppable( {
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: "#draggable",
    drop: function( event, ui ) {
        var cTop = $(this).closest(".box").position().top + parseInt($(this).closest(".box").css("margin-top"));
        var cBtm = $(this).closest(".box").position().top + parseInt($(this).closest(".box").css("margin-top")) + $(this).closest(".box").height();
        var dTop = $(this).position().top + parseInt($(this).css("margin-top"));
        var dBtm = $(this).position().top + parseInt($(this).css("margin-top")) + $(this).height()

        if (dBtm > cTop && dTop < cBtm) {
            alert("Dropped.");
        }
    }
});

示例:http://jsfiddle.net/lthibodeaux/2p56Y/6/

我意识到这并不优雅，但似乎可行。我承认只是粗略地测试了这个脚本。