如何限制使用JQuery UI可选择的可选元素？

Question

好吧。比方说，我有以下片段：

<div id="container"> 
    <div class="content" >A</div> 
    <div class="content" >B</div> 
    <div class="content" >C</div> 
    <div class="content" >D</div> 
    <div class="content" >E</div> 
    <div class="content" >F</div> 
</div> 

现在，让我们说，我已经完成：

$('.content').selectable({}); 

我的困境：

说，任何时候我拖着从而显得套索工具，我只想要选择4个div - 我可以在选择4后继续套索，但不应选择套索悬停的后续div。所以说的div的外观是由左到右，

ABCDEF

套索开始在A和I将其移动到正确的 - 在覆盖d所以它遇到的4极限 - 当我将鼠标悬停在è和F，这些现在不应选择。

Answer 1

绑定到选择事件并取消它，如果已经有4个选定的项目。

$("#selectable").selectable({ 
    selecting: function(event, ui) { 
    if ($(".ui-selected, .ui-selecting").length > 4) { 
     $('.ui-selecting').removeClass("ui-selecting"); 
    } 
    } 
}); 

编辑：更正代码片段，因为我只是走从iPad上刺。这里有一个你想要的工作jsfiddle以及：http://jsfiddle.net/fordlover49/MRphL/