Jquery UI SELECTABLE,如何只选择一个项目？

Question

有没有办法定义,只有一个项目可以用jquery.selectable小部件选择？

或者我要实现一个捕捉事件和自我操纵的工作场所会发生什么？

Answer 1

我扩展了Nirmal的限制鼠标选择案例的答案.此外,我觉得使用selected选项而不是完全独立的事件处理程序更干净.

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

还有一个小问题.使用鼠标选择多个项目时,将始终选择最后一个项目.这是因为传递给selected选项的函数是针对每个选定的项目运行的,我假设它按项目顺序排列.理想情况下,将选择鼠标光标所在的项目.我没有解决这个问题,因为我在使用鼠标时主要想要一个多选约束.

Answer 2

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

Answer 3

我稍微改进了mattblang的答案.兄弟姐妹也可以有后代,所以更一般的答案是:

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