如何在 JQuery UI Selectable 上实现切换功能？答案

【问题标题】：How to implement toggle functionality on JQuery UI Selectable?如何在 JQuery UI Selectable 上实现切换功能？
【发布时间】：2011-04-19 15:02:56
【问题描述】：

我正在使用 JQuery UI - Selectable。如果元素已被按下且已被选中（切换），我想取消选择该元素

你能帮我添加这个功能吗！

【问题讨论】：

这些答案对您有帮助吗？
这是一个很好的方法 - 它使默认值就像按下了 ctl 键一样：stackoverflow.com/a/12592042/1017650

标签： javascript jquery jquery-ui jquery-ui-selectable

【解决方案1】：

由于所有的类回调，你不会比这做得更好：

$(function () {
        $("#selectable").selectable({
            selected: function (event, ui) {
                if ($(ui.selected).hasClass('click-selected')) {
                    $(ui.selected).removeClass('ui-selected click-selected');

                } else {
                    $(ui.selected).addClass('click-selected');

                }
            },
            unselected: function (event, ui) {
                $(ui.unselected).removeClass('click-selected');
            }
        });
    });

【讨论】：

这是一个非常有用的答案。不知道为什么它没有被标记为答案？当然对我有用。
这是否会如您所愿触发事件？我猜 removeClass 不会触发 unselect 事件。
它适用于切换单个项目。但是，它会删除已选择的多个项目 - 因此不适用于切换多个项目。

【解决方案2】：

如果您在单击的同时按住 Ctrl 键，则您已经可以使用 jQuery UI 来选择该功能。

如果您确实需要将其作为默认功能，则无需使用 selectable，您可以将其作为简单的 onclick 处理程序来执行，就像 nolabel 建议的那样。

或者...您也可以编辑 jquery.ui.selectable.js 并添加一个选项来满足您的需要。应该不会太难，有 4 个地方检查了 event.metaKey，确保您的选项已设置，只需像 event.metaKey 始终为 true 一样运行代码路径。

由于可选择项可以使用更多的自定义，您还可以向 jQuery UI 开发人员提出功能请求，将其包含在下一个正式版本中。

【讨论】：

虽然我同意您在具有 ctrl 键的 PC 和设备上具有该功能，但在使用触摸设备时您没有该功能 - 因此这是一个非常好的主意，它不是双重的up 而是增加或扩展。

【解决方案3】：

你必须在代码中注入两个简单的元素来实现你想要的。每当您需要反转/切换功能时，这只会反转 metaKey 布尔值。

options: {
    appendTo: 'body',
    autoRefresh: true,
    distance: 0,
    filter: '*',
    tolerance: 'touch',
    inverted: false /* <= FIRST*/
},

_mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
        return;

    var options = this.options;

    if (options.inverted) /* <= SECOND*/
        event.metaKey = !event.metaKey; /* <= SECOND*/

【讨论】：