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

A B C D E F

套索从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上捅了一下。这是你想要的工作方式：http://jsfiddle.net/fordlover49/MRphL/

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

1 个答案: