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

发布于 2024-12-29 18:33:37 字数 658 浏览 0 评论 0原文

那么好吧。假设我有以下代码片段：

<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 上时，这些不应该是现在可以选择。

原文

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( {} );

My dilemma:

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

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天暗了我发光 2025-01-05 18:33:37

绑定选择事件，如果已经有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/

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");
     }
   }
});

Edit: 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/

回复收藏 0 原文

~没有更多了~