如何限制使用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/