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

Question

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

您能帮我添加此功能吗！

Answer 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');
            }
        });
    });

Answer 2

如果您在单击时按住 Ctrl 键，则您已经可以通过 jQuery UI 选择该功能。

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

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

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

Answer 3

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

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*/