jquery ui slide

Cómo evitar la selección múltiple en jQuery UI Complemento seleccionable

Question

Estoy usando el plugin jQuery UI seleccionable. Quiero seleccionar un elemento a la vez. Pero el complemento jQuery UI seleccionable permite la selección múltiple haciendo clic / arrastrando / sosteniendo la tecla CTRL. ¿Hay alguna forma de evitar la selección múltiple?

Answer 1

Aquí hay algunas buenas soluciones, pero la mayoría asume que siempre quiere seleccionar el primer elemento tal como aparece en el DOM en un caso de selección múltiple.

Para remediar esto, lastSelection una variable ( lastSelection ) que contiene el último elemento que se solicitó con éxito (en lugar del primero en el DOM) en el que retroceder en el caso de una selección no deseada.

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];
            }     
        }     
    }
});

Nota: Si desea anular la selección sin ctrl / cmd + clic, tendrá que implementar una solución alternativa con este método.

También quería señalar que la tolerance: ''fit'' simplemente requiere que el lazo rodee por completo un elemento objetivo para seleccionarlo, no desactivará la selección de lazo a menos que sus elementos no puedan estar rodeados en el área de lazo disponible. http://api.jqueryui.com/selectable/#option-tolerance

Answer 2

Aquí hay una solución más general que las publicadas anteriormente:

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

(Los seleccionados pueden no ser siempre secundarios de la selección, y aferrarse al "primer" elemento seleccionado provoca un comportamiento extraño al hacer Ctrl + clic).

Answer 3

Esta podría ser una mejor solución:

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

Answer 4

Esto funcionó para mí. Evita "enlazar" múltiples filas y ctrl + clic.

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

Answer 5

Lo que hice, es que permití la selección múltiple, pero cuando se hace la selección, solo guardo el primer elemento seleccionado

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

Esto selecciona todos los elementos seleccionados excepto el primero y elimina el estado seleccionado. Entonces, al final, solo se seleccionará un elemento. event.target corresponde a mi elemento ul.

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

Sé que este tema es un poco antiguo, pero todavía me encontré con él, por lo que puede ser útil para otra persona

Answer 6

No hay una forma definida. Sin embargo, puede pasar una función de devolución de llamada para eventos "Inicio" o "Seleccionado", que cancela la selección si se selecciona más de un elemento.

Answer 7

Puede crear su plugin personalizado de esta manera:

$.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

Si desea desactivar la multiselección no consecutiva pero aún desea mantener la selección de arrastre, puede hacerlo.

         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
                        }
                    }
                }
            }

Básicamente verifica si todos los elementos están uno al lado del otro.

Answer 9

Una discusión interesante sobre esto puede encontrar en este hilo del foro jQuery .

Answer 10

sí, puedes evitar este comportamiento, simplemente configura la opción toletance para ''encajar''