滾動divs中的重疊droppables

我有兩個可拖動和可拖動元素的面板。兩者都有很長的列表，我必須限制面板的大小並使其可滾動。這裏是帶有示例代碼的jsfiddle。 http://jsfiddle.net/hemant_sathe/sYhYK/48/滾動divs中的重疊droppables

這裏嵌入的CSS只是因爲我需要一些代碼中嵌入的jsfiddle鏈接

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

我的問題是，如果我從上面的列表拖動項到下面的列表中，則放置事件被抓獲首先從頂部面板列表，然後由底部面板。從下面的列表拖動項目並拖放到上面的項目時不會發生這種情況。

我的理解是，頂部面板的HTML只是由可滾動面板隱藏，但JavaScript仍然捕獲同一DOM上的事件。即使由於頂部列表捕獲事件而造成可投擲貪婪，這種行爲也不會改變。設置Z-index也沒有幫助我。

其中一個選項是檢查是否在視口中可見droppable，但在我的實際項目中，我使用knockout綁定並添加此功能將使我的代碼難以管理。

有什麼辦法通過使用HTML，CSS或一些快速的JS函數來解決這個問題嗎？

在此先感謝。

來源

2014-07-14 Hemant

我解決了這個問題，方法是檢查我放置點的元素是否是捕獲放置元素的元素或子元素。下面是檢查此

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/

來源

2014-07-14 17:48:50 Hemant

滾動divs中的重疊droppables

回答

相關問題