Как реализовать функциональность переключения на 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

У вас уже есть эта функциональность с возможностью выбора пользовательского интерфейса jQuery, если вы нажимаете клавишу Ctrl.

Если вам действительно нужно это как функциональность по умолчанию, вам не нужно использовать selectable, вы можете сделать это просто как простой обработчик onclick, как то, что предложил nolabel.

Или... вы можете также отредактировать jquery.ui.selectable.js и добавить опцию, которая делает именно то, что вам нужно. Не должно быть слишком сложно, есть 4 места, где проверяется event.metaKey, убедитесь, что ваш вариант установлен, просто запустите кодовые пути, как если бы event.metaKey всегда был true.

Поскольку для выбора можно было использовать больше настроек, вы также могли бы сделать запрос на добавление функции для разработчиков jQuery UI, чтобы включить его в следующую официальную версию.

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