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

Question

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

1. 完全禁用套索选择，仅切换触摸的任何内容（点击）
2. 完成按下Ctrl时所做的事情 - 例如。取消选择所选项并选择未选择的项目，并释放用户按住Ctrl键。

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

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

Answer 1

根本不使用selectable更容易：

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

Answer 2

前几天我回答了类似问题，我认为这解决了问题的第一部分 - 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 }

应该这样做。

Updated demo