溢出滾動容器中的jQuery UI droppables

Question

我在jQuery論壇上已經問過這個問題，但他們不像這裏那麼活躍。

我在頁面上有多個可放置區域時遇到問題。我有一個永遠不會移動的「靜態」可放置區域，位於具有多個可放置區域並可滾動（溢出：滾動）的div上方。當我滾動div使得div中的一個droppables在靜態droppable「下面」時，如果放在靜態區域上，則會爲兩個區域觸發drop事件。

對不起，這個解釋可能是模糊的，所以我把一個樣本：

標記：

<div style="float:left; width:300px; height: 300px; border: 1px solid #000;"> 
    <ul class="draggables"> 
     <li>Draggable</li> 
     <li>Draggable</li> 
     <li>Draggable</li> 
     <li>Draggable</li> 
     <li>Draggable</li> 
    </ul> 
</div> 
<div style="float:left; width:300px; height: 300px; border: 1px solid #000;"> 
    <div class="static-droppable" style="width:298px; height:100px; border:1px solid #f00;">Static Drop Area</div> 
    <div style="width:298px; height:198px; overflow-y:scroll; border:1px solid #0f0;"> 
     <ul class="scroll-droppables"> 
      <li style="border:1px solid #00f; height:60px;">Droppable</li> 
      <li style="border:1px solid #00f; height:60px;">Droppable</li> 
      <li style="border:1px solid #00f; height:60px;">Droppable</li> 
      <li style="border:1px solid #00f; height:60px;">Droppable</li> 
     </ul> 
    </div> 
</div> 

的Javascript：

//create draggables 
jQuery('.draggables li').draggable({ 
    revert: 'invalid', 
    cursor: 'move', 
    helper: 'clone' 
}); 

//the static droppable area 
jQuery('.static-droppable').droppable({ 
    greedy: true, 
    drop: function(event, ui) { 
     alert('Dropped on static drop area!'); 
    } 
}); 

//scrolling droppables 
Query('.scroll-droppables li').droppable({ 
    drop: function(event, ui) { 
     alert('Dropped on scrolling drop area!'); 
    } 
}); 

我曾嘗試做靜滴區「貪婪「，但這似乎沒有幫助的情況。

關於如何阻止這種情況發生的任何想法？

Answer 1

我有同樣的問題。我能夠通過初始化「靜態」Droppable來修復它。