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上的事件。即使我在顶部列表捕获事件时使droppable贪婪，此行为也不会更改。设置Z-index也对我没有帮助。

其中一个选项是检查droppable是否在视口中可见，但在我的实际项目中，我使用的是敲除绑定，添加此功能将使我的代码难以管理。

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

提前致谢。

Answer 1

我通过检查我正在丢弃的点上的元素是否是捕获drop的元素的相同元素或子元素来解决这个问题。这是检查此

的代码

    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/

滚动div中重叠的droppables

1 个答案: