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 的溢出-x 设置为隐藏，溢出-y 设置为自动.在那个 div 中，我还有一些 div.如此之多以至于外部 div 开始滚动.每个内部 div 都是一个 droppable，接受一个位于包装 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/

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

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

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

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.

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

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屋！