如何使用 JQuery UI selectable 限制可选元素？答案

【问题标题】：How do I limit selectable elements using JQuery UI selectable?如何使用 JQuery UI selectable 限制可选元素？
【发布时间】：2012-01-29 15:07:35
【问题描述】：

没关系。假设我有以下 sn-p：

<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的外观是从左到右的，

A B C D E F

套索从 A 开始，我将它向右移动 - 在覆盖 D 时它达到了 4 的限制 - 当我将鼠标悬停在 E 和 F 上时，这些现在不应该是可选的。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-selectable

【解决方案1】：

绑定到选择事件，如果已经有4个选中项，则取消。

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

编辑： 更正了代码 sn-p，因为我刚刚从 iPad 上试了一下。这也是您想要的工作 jsfiddle：http://jsfiddle.net/fordlover49/MRphL/

【讨论】：

我已经尝试过了，但它不起作用。或者，现在我使用$(this).mouseup(); 而不是return false;，但是，比如说，在调用.mouseup() 之后，套索在另外两个div 上偏离了，这两个div 被留下了ui-selecting
为您更新了答案，而不是返回 false，只需从选择事件中选择的项目中删除 ui-selecting 类。
如果您使用$(ui.selecting).siblings(".ui-selected, .ui-selecting")，您可以拥有多组具有不同限制的可选元素。
另外，如果你这样做$('.ui-selecting:not(:first)').removeClass('ui-selecting');，你会在拖动时立即摆脱糟糕的取消选择。