0

この機能は、jQuery プラグインとして既に存在していると確信しています。

このような「転送」コントロールを作成したいとしましょう。2 つのテキスト ボックスがあり、ボタンを介して 2 つの間でデータを転送したいと考えています。

Web アプリケーションで Backbone.js を多用しています。

バックボーン ビュー + コレクションを介してこれを行うことも、これを処理する jQuery プラグインを作成することもできます。jQuery プラグインを作成する場合、モジュール化するために Backbone ビュー内でそれとやり取りすることになるでしょう。

4

2 に答える 2

1

これは、非常に単純な jQuery 関数で実行できます。

$('.transfer').on('click',function(){
    $($(this).data('from'))
        .find(':selected')
        .remove()
        .appendTo($(this).data('to'))
        .prop('selected',false);
});

次の HTML を想定します。

<select id="one" multiple>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select id="two" multiple></select>

<button class="transfer" data-from="#one" data-to="#two">&raquo;</button>
<button class="transfer" data-from="#two" data-to="#one">&laquo;</button>

--- jsFiddle デモ ---

これから小さな jQuery プラグインを作成し、2 つの要素を与えてselect転送ボタンと機能を作成することもできますが、関数として実行することもできます。optionプラグインを使用すると、要素を前後に移動しても元の順序を維持するなど、より複雑な機能を追加することもできます。

于 2012-08-17T18:47:12.877 に答える
0

jQuery-UIドロップ可能を使用できます：http：//jqueryui.com/demos/droppable/#propagation

ドロップイベントでは、ドロップされた要素を確認し、前のコレクションからバックボーン.removeを実行し、受信コレクションに.addを実行します。

// Store a unique id of each item on the corresponding DOM element.
// ex. <div data-id="4129"></div>

$( ".selector" ).bind( "drop", function(event, ui) {
  // Look at the id and do a Collection.where() call to retrieve a reference to it.
  // Perform the .remove and the .add with that reference.
});
于 2012-08-17T18:49:39.117 に答える