Как предотвратить множественный выбор в jQuery UI Selectable плагин

Question

Я использую плагин jQuery UI Selectable. Я хочу выбрать один элемент за раз. Но плагин jQuery UI Selectable позволяет множественный выбор, нажав / перетащив / удерживая клавишу CTRL. Есть ли способ предотвратить множественный выбор?

Answer 1

Что я сделал, так это то, что я разрешил множественный выбор, но когда выбор сделан, я оставляю только первый выбранный элемент

<ul id="select">
    <li>Row 1</li>
    <li>Row 2</li>
    <li>Row 3</li>
</ul>

Выбирает все выбранные элементы, кроме первого, и удаляет выбранное состояние. Таким образом, в конце будет выбран только один элемент. event.target соответствует моему элементу ul.

$('#select').selectable({
    stop:function(event, ui){
        $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
    }
});

Я знаю, что эта тема довольно старая, но я все же наткнулся на нее, так что она может пригодиться кому-то еще

Answer 2

Это сработало для меня. Это предотвращает "лассо" несколько строк и Ctrl + клик.

$(function() {
$("#selectable").selectable({
      selecting: function(event, ui){
            if( $(".ui-selected, .ui-selecting").length > 1){
                  $(ui.selecting).removeClass("ui-selecting");
            }
      }
});
});

Answer 3

Это может быть лучшим решением:

$('#selectable').selectable({
    selecting: function (event, ui) {
        $(event.target).children('.ui-selecting').not(':first').removeClass('ui-selecting');
    }
});

Answer 4

Нет определенного пути. Однако вы можете передать функцию обратного вызова для событий «Пуск» или «Выбранные», которая отменяет выбор, если выбрано несколько элементов.

Answer 5

Вот более общее решение, чем те, которые были опубликованы ранее:

    $element.selectable({
        selecting: function (e, ui) {
            // force single selection
            $(e.target).find('.ui-selectee.ui-selecting').not(ui.selecting).removeClass('ui-selecting');
            $(e.target).find('.ui-selectee.ui-selected').not(ui.selecting).removeClass('ui-selected');
        }
    });

(Селекты не всегда могут быть дочерними для селектируемого, и удержание «первого» селекти вызывает странное поведение при нажатии Ctrl + щелчок.)

Answer 6

да, вы можете предотвратить это поведение, просто установите опцию toletance 'fit'

Answer 7

Вы можете создать свой собственный плагин так:

$.widget("xim.singleSelectable", {
    options: {
        select: null
    },
    _create: function () {
        var self = this;
        this.element.addClass('ui-selectable');
        this.element.delegate('li', 'click', function (e) {
            self.element.find('>li').removeClass('ui-selected');
            $(this).addClass('ui-selected');

            if ($.isFunction(self.options.select)) {
                self.options.select.apply(self.element, [e, this]);
            }

        });
    },
    selected: function () {
        return this.element.find('li.ui-selected');
    },
    destroy: function () {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
    }
});

Answer 8

Интересное обсуждение этого вопроса вы можете найти в этой ветке jQuery на форуме .

Answer 9

Если вы хотите отключить непоследовательный множественный выбор, но все еще хотите сохранить выбор перетаскивания, вы можете сделать это.

         stop: function( event, ui ) {
                if( $(".ui-selected, .ui-selecting").length > 1){
                    var elems = $('.ui-selected, .ui-selecting');

                    for(var i = 0; i < elems.length - 1; i++){
                        if($(elems[i]).closest('td').next('td').text() != $(elems[i+1]).text()){
                           //Non consecutive selection detected
                        }
                    }
                }
            }

По сути, он проверяет, все ли элементы находятся рядом друг с другом.

Answer 10

Здесь есть несколько хороших решений, но большинство из них предполагает, что вы всегда хотите выбрать первый элемент, как он появляется в DOM в случае множественного выбора.

Чтобы исправить это, я сохраняю переменную (lastSelection), которая содержит последний элемент, который был успешно запрошен (а не первый в DOM), к которому можно вернуться в случае нежелательного выбора.

var lastSelection;// this will record our last successful selection

$('#selectable').selectable({
    filter: '.element',
    selecting: function () {
        if ($('.ui-selecting').length > 1) {
            // if selecting multiple (lasso) we will ignore the selection and fallback
            $('.ui-selecting').removeClass('ui-selecting');
            $(lastSelection).addClass('ui-selecting');// if no value, nothing will be selected
        }     
    },
    stop: function () {
        if ($('.ui-selected').length > 1) {
            // looks like we have an invalid selection, fallback to lastSelection
            // this handles the ctrl (windows), cmd (OSX) multi-select cases
            $('.ui-selected').removeClass('ui-selected');
            $(lastSelection).addClass('ui-selected');// if no value, nothing will be selected
        } else {
            if ($('.ui-selected').first().is('.element')) {
                // if we successfully found a selection, set it as our new lastSelection value
                lastSelection = $('.ui-selected')[0];
            }     
        }     
    }
});

Примечание. Если вы хотите отменить выделение без нажатия Ctrl / CMD +, вам нужно будет обойти этот метод.

Я также хотел бы отметить, что tolerance: 'fit' просто требует, чтобы лассо полностью окружало целевой элемент, чтобы выделить его, он не отключит выбор лассо, если ваши элементы не могут быть окружены в доступной области лассо. http://api.jqueryui.com/selectable/#option-tolerance