Jquery seleccionable sin mantener el control

Question

Uso el Jquery Selectable Pero el usuario tiene que mantener presionado el botón de control para seleccionar elementos. De todos modos el usuario puede seleccionar varios elementos sin mantener presionado el botón de control?

en otras palabras: Deseo que el usuario pueda seleccionar cualquier elemento haciendo clic en él y desmarcarlo haciendo clic de nuevo.

Answer 1

Puede agregar la clase "seleccionada" cuando el usuario haga clic en los elementos, y simplemente elimine la clase cuando vuelva a hacer clic.

$(".selectable").click(function(e) { 
    $(this).toggleClass("selected"); 
}); 

Answer 2

También puede usar el botón izquierdo del mouse y arrastrarlo hacia abajo para seleccionar varios elementos. Pero solo los elementos adyacentes pueden ser seleccionados por esto.

Answer 3

Lo más fácil es implementar un controlador de clic jQuery que conmuta una clase selected en sus elementos seleccionables. Luego simplemente escriba el estilo selected apropiadamente. jQuery seleccionable es más un obstáculo que una ayuda en su caso.

Answer 4

Puede usar un conjunto de controladores de eventos personalizados para controlar cómo se comportan la selección y la desición. Con este conjunto de controladores nunca se deselecciona nada a menos que se seleccione y vuelva a hacer clic en él sin hacer un rango de selección. Si elimina el if (event.detail == 0) { y sus enunciados relacionados, la selección de rango actuará como inversión de rango; todo lo que esté en el rango seleccionado se deseleccionará, y viceversa.

var _selectRange = false, _deselectQueue = []; 
$(function() { 
    $("#selectable").selectable({ 
     selecting: function (event, ui) { 
      if (event.detail == 0) { 
       _selectRange = true; 
       return true; 
      } 
      if ($(ui.selecting).hasClass('ui-selected')) { 
       _deselectQueue.push(ui.selecting); 
      } 
     }, 
     unselecting: function (event, ui) { 
      $(ui.unselecting).addClass('ui-selected'); 
     }, 
     stop: function() { 
      if (!_selectRange) { 
       $.each(_deselectQueue, function (ix, de) { 
        $(de) 
         .removeClass('ui-selecting') 
         .removeClass('ui-selected'); 
       }); 
      } 
      _selectRange = false; 
      _deselectQueue = []; 
     } 
    }); 
}); 

While it lasts, here's a jsfiddle example.