jQuery可拖放和可滚动div [英] jQuery droppable and scrollable divs

问题描述

我对 jQuery UI 的可投放组件有一些问题，但我不是非常确定我是因为我的代码还是组件中的错误而遇到了这个问题.

I have a little problem with jQuery UI's droppable component, but I'm not quite sure whether I have that problem because of my code or because of a bug in the component.

我有一个固定宽度和高度的div.该div的overflow-x设置为隐藏，overflow-y设置为自动. 在那个div中，我还有一些div.它们如此之多，以至于外部div开始滚动.每个内部div都是一个可放置的div，可以接受位于包装div外部的可拖动对象.

I have a div with a fixed width and height. The overflow-x for that div is set to hidden, overflow-y is set to auto. Within that div I have some more div's. So many of them that the outer div starts scrolling. Each of the inner divs is a droppable, accepting a draggable which is outside the wrapper div.

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

If I drag & drop the draggable item somewhere within the wrapper, everything works fine. The problem is that the drop event gets even triggered if I drop the element shortly below the wrapper div.

我不太善于解释这个问题；因此，这里有一些代码可以重现该问题:

I'm not really good at explaining the problem; therefore here is some code which reproduces the problem:

http://jsfiddle.net/2p56Y/

只需拖放拖动我！"带有滚动条的div下面的容器.出乎意料的是，您会看到警报已删除".

Simply drag and drop the "Drag Me!" container below the div with the scrollbar. Unexpectedly you will see the alert "dropped".

现在有一些有趣的事情:如果向下滚动到"Test28"项，现在将可拖动对象拖放到包装器下方，则不会触发drop事件.当您将隐藏的元素放到它们上时，它们似乎仍然可以访问.

Now something interesting: If you scroll down to item "Test28" and now you drag and drop the draggable below the wrapper, the drop event won't be triggered. It looks like the hidden elements are still accessible when you drop something on them.

那么，这是一个bug还是我需要以不同的方式编写代码才能使其正常工作? (或两者?:-))

So, is this a bug or do I need to write my code differently to make it work? (or both? :-) )

推荐答案

如果droppable的底部在父级的顶部上方或droppable的顶部在父级的下方，请检查droppable元素与父级容器的界限，并中断函数的执行.底部:

Check the droppable element's bounds against the parent container and break the execution of the function if the droppable's bottom is above the parent's top or the droppable's top is beneath the parent's bottom:

$('.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/

我意识到它并不优雅，但似乎可行.我承认只对该脚本进行了粗略的测试.

I realize it's not elegant, but it seems workable. I admit to only cursory testing of this script.

这篇关于jQuery可拖放和可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！