0

私はこれを機能させていますが、既存のコード内で機能させることができません。

私が起こる必要があるのは：http：//jsfiddle.net/uJcB7/176/

したがって、チェックボックスからdivに機能を追加すると、それらがリストに追加されます。それぞれの機能を動作させていますが、2つを組み合わせる方法がわかりません。

チェックボックスからdivに機能を追加すると、機能の文字列がリストとして追加され、ドラッグできるようになります。

乾杯

4

1 に答える 1

2

答える最も簡単な方法はデモンストレーションを使うことだと思いますか？

jsFiddleデモ

うまくいけば、これがあなたが求めているものです、私はあなたのためにコードを分解します。

まず、ドキュメント対応の関数呼び出しをマージし、適切なタイミングで同じセレクターを使用していたjQueryステートメントをすべて折りたたみました。これにより、初期化コードが作成されました。これは次のとおりです。

$(function() {

    $("#sortable").sortable().disableSelection();
    $('#cblistp input').click(additionalFeatures);

    additionalFeatures();
});

次に、元の配列を折りたたんで、jQueryの関数allValsに置き換えました。関数は本質的にmap関数であり、結果として返される要素の配列が追加されます。関数内では、選択したすべてのHTML入力を1つずつ返すだけです。それから私は少し良い結合でそれらを'しています。これは私たちに与えます：mapeachmap.valuejoin,

// add additional features
function additionalFeatures() {   
    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
};

これに加えて、前述のように、map関数は関数と同様にeach機能します。これにより、に表示するテキストを選択すると同時に、新しい並べ替え可能なリストを作成できますdiv。最初に古い並べ替え可能ファイルをクリアする必要があり、次に選択したアイテムを追加し、最後に新しい並べ替え可能ファイルを作成します。これにより、次のようになります。

// add additional features
function additionalFeatures() {
    // clear out the old sortable
    var sortableList = $('#sortable').sortable('destroy').find('li').remove().end();

    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        sortableList.append('<li>' + input.value + '</li>');            
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
    sortableList.sortable();
};
于 2012-08-16T10:33:09.250 に答える