4

jQuery UI Sortable を使用して、一連のラジオ ボタンにリンクされた分類された選択を実装しています。この部分は数年間うまく機能しています。( jsFiddle バージョンを参照してください。 ) ここで、クライアントはそれを変更したいと考えています。一部のアイテムは特定のカテゴリにしか入れないようにする必要があり、私は完全に立ち往生しています。

バックエンドでは、特定のラジオ ボタンを無効にするのは簡単です。

<ul id="L" class="L ui-sortable">
    Available (A):
    <li id='L_1'>
    <input type='radio' name='L_1' id='L_1_A' value='A'>
      <label for='L_1_A'>A</label>
    <input type='radio' name='L_1' id='L_1_B' disabled='disabled' value='B'>
      <label for='L_1_B'>B</label>
    <input type='radio' name='L_1' id='L_1_C' value='C'>
      <label for='L_1_C'>C</label>
    Item 1 can't go in B
    </li>
    <li id='L_2'>
    <input type='radio' name='L_2' id='L_2_A' value='A'>
      <label for='L_2_A'>A</label>
    <input type='radio' name='L_2' id='L_2_B' value='B'>
      <label for='L_2_B'>B</label>
    <input type='radio' name='L_2' id='L_2_C' disabled='disabled' value='C'>
      <label for='L_2_C'>C</label>
    Item 2 can't go in C
    </li>
    <!-- etc. -->
</ul>
<ul id='L_B' class='L ui-sortable cat'>Selected - B</ul>
<ul id='L_C' class='L ui-sortable cat'>Selected - C</ul>

(ラジオ ボタンは、CSS と JavaScript の組み合わせによって非表示になります。) これには、不適切な分類を保存することが不可能になるという副作用があります。分類できないカテゴリに何かを入れようとすると、選択内容は完全に無視されます。 (無効なラジオ ボタンは値を返さないため)。しかし、戻って保存した記録を見ない限り、何が起こったのかわかりません。あなたには、いつものように箱にアイテムを入れたように見えます。

私が望むのは、無効なラジオ ボタンにリンクされている宛先ボックスが、アイテムがつかまれたときに「灰色になる」ようにすることです。それでも、そのボックスにアイテムを入れようとすると、アイテムは開始点に戻る必要があります。$("ul.notallowed").sortable("option","disabled",true);基本的に、 を設定した場合と同じように動作する必要がありますが、ユーザーが許可されていないアイテムを「保持」している間のみです。

.is(":disabled")ラジオ ボタンが無効になっているかどうかを確認するコマンドがあることは知っていますが、どこに配置すればよいかわかりません。

既存の実装の JavaScript は次のとおりです。つまり、すべてのアイテムに対してすべてのカテゴリが許可されます。（これをコーディングするためのより良い/より効率的な方法があると確信していますが、それが機能することを嬉しく思います。）

$(function() {
    $("#L").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[0].checked = true;
        }
    }).disableSelection();
    $("#L_B").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[1].checked = true;
        }
    }).disableSelection();
    $("#L_C").sortable({
        connectWith: '.L',
        containment: '#ListContainer',
        receive: function(event, ui) {
            $(ui.item).find('input:radio')[2].checked = true;
        }
    }).disableSelection();
});
$(document).ready(function() {
    $('.B').closest('li').appendTo("#L_B");
    $('.C').closest('li').appendTo("#L_C");
    $('ul.ui-sortable').width("10em");
    $('ul.ui-sortable li').css({cursor:'pointer'});
});

私は、中括弧を含むプログラミング言語がまったく苦手であることに注意してください。私は上記のコードを書きましたが、それが機能する理由は言うまでもなく、そのほとんどが何をするのかを説明できませんでした。できるだけ簡単な言葉で答えを組み立てていただければ幸いです。

4

1 に答える 1

9

それで、私は JavaScript が嫌いだと言いましたか? しかし、私はそれを機能させました（グレー表示はありませんが、私はずっと前にそれを気にするのをやめました）グレー表示とすべてで。

パート 1、jQuery で無効なラジオ ボタンを検出することは忘れてください。((":disabled")セレクターとして機能しますが、親リスト項目ではなく、ラジオ ボタンを返します。) 代わりに、リスト項目にクラスを追加するだけです。

<li class="noB">
    <label><input type="radio" name="L1" value="A" />A</label>
    <label><input type="radio" name="L1" value="B" disabled="disabled" />B</label>
    <label><input type="radio" name="L1" value="C" />C</label>
    Item 1 can't go in B
</li>

パート 2 では、宛先リストの「受信」機能で、条件付きで送信者jQuery オブジェクトのソート可能をキャンセルします。例えば、

$("#L_B").sortable({
    connectWith: '.L',
    containment: '#ListContainer',
    receive: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $(ui.sender).sortable("cancel");
        }
        else {
            $(ui.item).find('input:radio')[1].checked = true;
        }
    },
}).disableSelection();

ui.item.sender の部分は非常に重要です。さまざまなことをorまたはwhat で試している間に、永久に失った髪の毛の数はわかりませんli.noB。(私にはほとんど意味がありません: 私が防止したいのは、項目を間違った場所に置くことです。なぜ親リストからの削除をキャンセルする必要があるのでしょうか? しかしとにかく。)

私の場合のパート 3 は、リスト ラベルをリストから移動することでしたcancel。

パート 4、グレーネス:各ソート可能なボックス.addClassの「開始」機能と.removeClass「停止」機能で使用します。これらを の後に置きましたreceive: function(...) {...}が、順序は関係ありません。(この関数を一度書いて毎回呼び出す方法は間違いなくありますが、JavaScript と私がうまくいかないことについて言及しましたか?)

    start: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $("#L_B").addClass("disabled");
        }
        if ($(ui.item).hasClass("noC")) {
            $("#L_C").addClass("disabled");
        }
    },
    stop: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $("#L_B").removeClass("disabled");
        }
        if ($(ui.item).hasClass("noC")) {
            $("#L_C").removeClass("disabled");
        }
    }

CSS で「disabled」クラスを定義することを忘れないでください。そうしないと、これらすべての体操が正確に機能しなくなります...何もしません。

jsFiddle の作業: http://jsfiddle.net/NY7Ms/4/

于 2013-06-04T02:49:26.647 に答える