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

Question

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

1. 完全禁用套索选择，只切换任何触摸（点击）
2. 准确执行按下 Ctrl 时所做的操作——例如取消选择选中项并选择未选中项，并让用户免于按住 Ctrl 键。

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

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

Answer 1

根本不使用 selectable 更容易：

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

Answer 2

前几天我回答了类似的问题，我认为可以解决您问题的第 1 部分 -如何使用鼠标单击选择多个项目？. 这允许左键单击或套索选择/取消选择，而无需Ctrl键。

但是，查看演示，我为该问题创建，通过添加

tolerance: 'fit'

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

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

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

和类似的东西

.ui-selectable-helper { display:none }

应该这样做。

更新的演示