JQuery UI Selectable - отменить выбор выбранного элемента при нажатии

Кто-нибудь знает, есть ли способ настроить элемент jquery ui selectable, чтобы отменить выбор выбранного элемента при его нажатии? Похоже, как переключатель. Если он уже выбран, отмените его выбор, в противном случае выполните поведение по умолчанию.

Спасибо.

Ответ 1

Я очень поздно реагирую на ваш вопрос, но позвольте мне просто ответить на него так, чтобы сохранить его как ссылку для других.

$( ".selector" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable();

это позволит вам искать поведение переключателя.

Ответ 2

Хорошо, вот что я только что закончил делать. Я использовал имя класса для переключения и отмены выбора. Мне бы хотелось услышать, есть ли другой вариант:

$("#selectable").selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
            // do unselected stuff
        } else {            
            $(ui.selected).addClass('selectedfilter');
            // do selected stuff
        }
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('selectedfilter');
    }
});

Ответ 3

Если вы хотите, чтобы существующие выделения сохранялись и все же выполнялись операции переключения, вам просто нужно игнорировать невыбранное событие для данного решения. Также вам нужно удалить выбранный ui класс.

$("#selectable").selectable({
selected: function (event, ui) {
    if ($(ui.selected).hasClass('selectedfilter')) {
        $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected');
        // do unselected stuff
    } else {            
        $(ui.selected).addClass('selectedfilter').addClass('ui-selected');
        // do selected stuff
    }
}
});

Ответ 4

Это то, что вы имеете в виду?

Это событие запускается в конце операции выбора, причем каждый элемент удаляется из выделения.

Примеры кода

Поставить функцию обратного вызова для обработки невыбранного события в качестве параметра init.

$( ".selector" ).selectable({
   unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
  ...
});

Источник:

http://jqueryui.com/demos/selectable/#event-unselected