jquery-ui - Jquery UI SELECTABLE、1つのアイテムのみを選択する方法は？

Question

それを定義する方法はありますか？jquery.selectableウィジェットで選択できるアイテムは1つだけですか？

または、イベントをキャプチャして自分で操作する回避策を実装する必要がありますか？

Answer 1

Nirmalの回答を拡張して、マウス選択のケースを制限しました。selectedまた、完全に独立したイベントハンドラーよりも、このオプションを使用する方がクリーンだと思います。

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

小さな問題が1つ残っています。マウスで複数のアイテムを選択すると、常に最後のアイテムが選択されます。これは、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");
            }
        );
    }
});