溢出滚动容器中的jQuery UI droppables

我在jQuery论坛上已经问过这个问题，但他们不像这里那么活跃。溢出滚动容器中的jQuery UI droppables

我在页面上有多个可放置区域时遇到问题。我有一个永远不会移动的“静态”可放置区域，位于具有多个可放置区域并可滚动（溢出：滚动）的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!'); 
    } 
});

我曾尝试做静滴区“贪婪“，但这似乎没有帮助的情况。

关于如何阻止这种情况发生的任何想法？

来源

2010-03-01 shauno

我有同样的问题。我能够通过初始化“静态”Droppable来修复它。

来源

2010-04-14 20:13:18

溢出滚动容器中的jQuery UI droppables

回答

相关问题