jQuery UI選択可能 - クリック時に選択されたアイテムを選択しません

Question

クリックすると、選択した要素を解除するためにjQuery UI選択可能な要素を構成する方法があるかどうかを知っていますか？トグルのようなもの。既に選択されている場合は、選択していません。そうでなければ、デフォルトの動作を行います。

ありがとう。

Answer 1

私はあなたの質問に応答するのが非常に遅れていますが、とにかくそれに答えてみましょう。

$( ".selector" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable();

これにより、探しているトグル動作が可能になります。

Answer 2

さて、私がやってきたことです。クラス名を使用して、選択と選択解除を切り替えました。別の選択肢があるかどうか聞いてみたいです。

$("#selectable").selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
            // do unselected stuff
        } else {            
            $(ui.selected).addClass('selectedfilter');
            // do selected stuff
        }
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('selectedfilter');
    }
});

Answer 3

既存の選択を保存し、トグル操作が必要な場合は、与えられたソリューションの選択されていないイベントを無視する必要があります。また、UI選択のクラスを削除する必要があります。

$("#selectable").selectable({
selected: function (event, ui) {
    if ($(ui.selected).hasClass('selectedfilter')) {
        $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected');
        // do unselected stuff
    } else {            
        $(ui.selected).addClass('selectedfilter').addClass('ui-selected');
        // do selected stuff
    }
}
});

Answer 4

これはあなたが意味するものですか？

このイベントは、選択から削除された各要素で、選択操作の終了時にトリガーされます。

コードの例

Callback関数を提供して、選択されていないイベントをINITオプションとして処理します。

$( ".selector" ).selectable({
   unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
  ...
});

ソース：

http://jqueryui.com/demos/selectable/#event-unselected