jQuery UI Selectable - отмените выбор выбранного элемента по клику

Question

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

Благодарю.

Answer 1

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

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

это позволит переключать поведение, которое вы ищете.

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

Answer 3

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

$("#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
    }
}
});

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