jquery - 滚动 div 中的重叠 droppable

Question

我有两个可拖放元素面板。两者都有很长的列表，我必须限制面板的大小并使它们可滚动。这是带有示例代码的 jsfiddle。 http://jsfiddle.net/hemant_sathe/sYhYK/48/

在这里嵌入 CSS 只是因为我需要一些代码来嵌入 jsfiddle 链接

.panel{
height: 150px;
overflow: auto;
margin: 0 0 20px 0;
border: 1px solid red;
}

我的问题是，如果我将元素从顶部列表拖放到下面的列表中，放置事件首先被顶部面板的列表捕获，然后被底部面板捕获。将元素从下方列表拖放到上方列表时不会发生这种情况。

我的理解是来自顶部面板的 HTML 只是被可滚动面板隐藏，但 javascript 仍然捕获同一 DOM 上的事件。即使我在事件被顶部列表捕获时使可丢弃贪婪，这种行为也不会改变。设置 Z-index 也对我没有帮助。

其中一个选项是检查 droppable 在视口(viewport)中是否可见，但在我的实际元素中，我正在使用 knockout 绑定(bind)并添加此功能将使我的代码难以管理。

有没有办法通过使用 HTML、CSS 或一些快速的 JS 函数来解决这个问题？

提前致谢。

Answer 1

我通过检查我放置的元素是否与捕获放置的元素相同或元素的子元素来解决这个问题。这是检查这个的代码

    drop: function (event, ui) {
            //Due to scrollable divs, the schedule drag drop may get wrongly captured by hidden elements
            //We ensure that the element at drop location is the same element or contained element 
            //which captures the drop
            var dropElement = document.elementFromPoint(event.clientX, event.clientY);

            //dropLocation is the droppable element on which we drop
            //The point where we drop must be on dropLocation or its child element
            //When the dropLocation is not visible due to scrollable div, second
            //event which is captured by correct element is executed.  
            if (dropLocation == $(dropElement) ||
                    dropLocation.find($(dropElement)).length > 0) {

            // code to execute on successful drop
            }
        }

这是 jsfiddle 的解决方案:http://jsfiddle.net/hemant_sathe/umwHJ/8/