如何使用JQuery UI selectable限制可选元素? [英] How do I limit selectable elements using JQuery UI selectable?

问题描述

好吧.假设我有以下代码段:

So okay. Let's say i have the following snippet:

<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>

现在，假设我已经执行了:

Now, let's say I have performed:

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

我的困境:

说，只要我拖动并因此出现套索工具，我只希望选择4个div-选择4个后，我仍然可以扩展套索，但是不应该选择套索所悬停的后续div .所以说div的外观是从左到右，

Say, any time I am dragging and thus the lasso tool appears, I only want 4 divs to be selected - I can still extend the lasso after I have selected 4 but the succeeding divs that the lasso hovers over should not be selected. So say the looks of the divs is from left to right,

A B C D E F

A B C D E F

套索从A开始，然后向右移动-在覆盖D时达到了4的极限-当我将鼠标悬停在E和F上时，这些应该现在无法选择.

The lasso starts at A and I move it to right - upon covering D so it met the limit of 4 - when I hover over E and F, these shouldn't be selectable now.

推荐答案

绑定到选择事件，如果已经有4个选择项，则将其取消.

Bind to the selecting event and cancel it if there are already 4 selected items.

$( "#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/

Corrected code snippet, as I was just taking a stab from iPad. Here's a working jsfiddle of what you want as well: http://jsfiddle.net/fordlover49/MRphL/

这篇关于如何使用JQuery UI selectable限制可选元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！