jquery - 如何使用 JQuery UI selectable 限制可选元素？

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 开始，我将它向右移动 - 在覆盖 D 时，它达到了 4 的限制 - 当我将鼠标悬停在 E 和 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/