JQuery UI Selectable - 如何自定义其行为答案

【问题标题】：JQuery UI Selectable - how to customize its behaviorJQuery UI Selectable - 如何自定义其行为
【发布时间】：2015-09-11 02:06:55
【问题描述】：

我想确保可选的以下非常原始的行为：

我正在尝试构建一个篮子——当它打开时会显示其内容并突出显示一些项目。然后用户选择更多或取消选择其他，提交表单。就这样。

我与 Selectable 斗争了很长时间，它是一个非常聪明的脚本，但我似乎无法达到这个基本要求。当显示表单时，用户需要按住 Ctrl 键，否则已经选择的项目会丢失。

【问题讨论】：

【解决方案1】：

完全不使用 selectable 更容易：

$('ul > li').click(function() {
  $(this).toggleClass('ui-state-highlight');
});

【讨论】：

【解决方案2】：

前几天我回答了类似的问题，我认为可以解决您问题的第 1 部分 - How to select multiple items using mouse click?。这允许左键单击或套索选择/取消选择，而无需 Ctrl 键。

但是，查看demo，我为该问题创建，添加

tolerance: 'fit'

对于可选择项，它似乎通过套索禁用选择，我认为这可以解决您问题的第 2 部分。

最后，如果您使用 jQueryUI 主题，您还需要覆盖套索样式。相关的主题规则是：

.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }

类似的东西

.ui-selectable-helper { display:none }

应该这样做。

【讨论】：

这并不像你说的那样做。据我所知，tolerance: 'fit' 是关于套索是否需要围绕一个元素来选择它。
@Sahuagin 对于这个问题确实有帮助，因为很难开始选择项目并设法用套索完全包围一个项目。这在当时显然已经足够好了。这不是万无一失的解决方案，因为根据可选项目的大小和形状，可能仍然可以套索。
@andyb 好吧，对我来说，在 chrome 中，你的演示甚至不起作用。点击不会选择任何东西，如果我拖动足够大的区域，我仍然可以套索东西。
@Sahuagin tolerance: 'fit' 不在演示的设置中（我承认这是一个不太理想的“演示”），但我的回答确实是“如果你添加......”。因此，添加它会删除我描述的套索选择。该演示适用于我在 Windows Chrome 43.0.2334.0 上运行良好。您使用的是哪种 Chrome？
@andyb tolerance: 'fit' 在更新的演示中。昨天不工作，但现在似乎工作了。