Question

我对jQuery UI的可放置组件有一点问题，但由于我的代码或组件中的错误，我不确定是否有这个问题。

我有一个固定宽度和高度的div。该div的overflow-x设置为hidden，overflow-y设置为auto。在那个div中，我有更多的div。外部div开始滚动的很多。每个内部div都是一个droppable，接受一个在包装div之外的draggable。

如果我拖累＆amp;将可拖动项目放在包装器内的某处，一切正常。问题是如果我将元素放在包装器div的下方，甚至会触发drop事件。

我并不擅长解释这个问题;因此，这里有一些代码可以重现问题：

http://jsfiddle.net/2p56Y/

只需拖放“拖动我！”即可。使用滚动条在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/

我意识到这不优雅，但似乎可行。我承认只对该脚本进行粗略测试。

Answer 2

你已经接受了答案，虽然我认为我应该把它放在那里：

更优雅的解决方法（基于事件冒泡并且只能真正处理可视性到一个级别，而不是递归）可以通过使$('.box, .item').droppable()和默认greedy:false嵌套div的放置事件来实现应该触发，然后是外部div。

像hasClass('box')这样的简单元素检查意味着丢弃发生在一个有效的区域中，所以你需要做的就是在内部drop事件缓存中放入的元素，然后在外部div的drop上事件（如上所述，只是片刻之后发生）无论如何都要做。

如果你掉到外部div之外，即使内部div drop事件会触发，外部div也不会发生，所以除了无用的缓存事件之外什么也没发生。唯一的问题是看起来有一个非贪婪的嵌套droppables的错误，jQuery示例http://jqueryui.com/demos/droppable/propagation.html甚至不能正常工作 - 它表现得好像它使用事件捕获而不是事件冒泡..

唯一的另一个（可以说是更合理的）解释是我误解了嵌套的dropable是如何表现的。

jQuery可放置和可滚动的div

2 个答案: