jquery - JQuery UI Selectable - その動作をカスタマイズする方法

Question

選択可能なものについて、次の非常に原始的な動作を保証したいと思います。

なげなわ選択を完全に無効にし、触れた（クリックした）ものだけを切り替えます
Ctrl が押されたときとまったく同じことを行います。たとえば、選択を解除して選択されていないアイテムを選択し、ユーザーが Ctrl キーを押したままにしないようにします。

バスケットのようなものを作成しようとしています。開くと、コンテンツが表示され、いくつかのアイテムが強調表示されます。次に、ユーザーはさらに選択するか、他の選択を解除して、フォームを送信します。それで全部です。

私はかなり長い間 Selectable と戦っていましたが、これは非常にスマートなスクリプトですが、この基本的な要件を達成できないようです。フォームが表示されているとき、ユーザーは Ctrl キーを押し続ける必要があります。そうしないと、既に選択されているアイテムが失われます。

score 4 · Accepted Answer

selectable をまったく使用しない方が簡単です。

$('ul > li').click(function() {
  $(this).toggleClass('ui-state-highlight');
});

score 3 · Accepted Answer

私は先日、あなたの問題のパート1を解決すると思う同様のことを答えました-マウスクリックを使用して複数のアイテムを選択する方法は? . これにより、キーを必要とせずに左クリックまたはなげなわで選択/選択解除できCtrlます。

ただし、demoを見て、その質問のために作成したものを追加して

tolerance: 'fit'

選択可能にすると、なげなわによる選択が無効になっているようで、質問のパート2を解決すると思います。

最後に、jQueryUI テーマを使用する場合は、なげなわスタイルもオーバーライドする必要があります。関連するテーマルールは次のとおりです。

.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }

のようなもの

.ui-selectable-helper { display:none }

するべきです。

2 に答える 2