Jquery UI SELECTABLE, ¿cómo seleccionar un solo artículo?

Question

¿hay alguna manera de definir eso, solo se puede seleccionar un elemento con el widget jquery.selectable?

O tengo que implementar un workarround capturando eventos y manipulando por mi cuenta lo que sucede?

Answer 1

$("#myList li").click(function() { 
    $(this).addClass("selected").siblings().removeClass("selected"); 
}); 

Answer 2

Expandí la respuesta de Nirmal para limitar el caso de selección del mouse. Además, creo que es más limpio utilizar la opción selected en lugar de un controlador de eventos completamente independiente.

$("#selectable").selectable({ 
    selected: function(event, ui) { 
     $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");   
    }     
}); 

Queda un pequeño problema. Al seleccionar múltiples elementos con el mouse, siempre se seleccionará el último elemento. Esto se debe a que la función pasada a la opción selected se ejecuta para cada elemento seleccionado, que supongo va en el orden del artículo. Idealmente, se seleccionará el elemento al que aterriza el cursor del mouse. No solucioné esto porque principalmente quería una restricción de selección múltiple al usar el mouse.

Answer 3

Mejoro un poco la respuesta de mattblang. Los hermanos pueden tener también descendientes, por lo que la respuesta más general es:

$("#selectable").selectable({ 
    selected: function(event, ui) { 
     $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected").each(
      function(key,value){ 
       $(value).find('*').removeClass("ui-selected"); 
      } 
     ); 
    } 
});