0

インターフェイスと JQuery を使用してポートレット/ウィジェット JQuery インターフェイスを実装しています。ユーザーはウィジェットをドラッグ アンド ドロップし、画面はそれを処理できます。画面に div 要素の順序を表示する serialize を使用できます。これを Cookie または DB に保存できますが、それはまだ問題ではありません。

私の質問は、cookie/DB の順序に一致するように div を再配置するページを読み込むにはどうすればよいですか? クッキーベースの例はいいかもしれませんが、それはあまり重要ではありません.

必要な順序で div を再配置できる特定の JQuery メソッドを呼び出すことができますか?

4

3 に答える 3

1

@RwL の回答に示されている手法は機能しますが、要素を DOM から明示的に削除する必要はありません。

を使用.append()すると、要素が新しい場所に移動します。

この HTML:

<div id="widgets">
    <div id="widgetA">A</div>
    <div id="widgetB">B</div>
    <div id="widgetC">C</div>
    <div id="widgetD">D</div>
    <div id="widgetE">E</div>
</div>

このスクリプトを適用すると:

$(function() {
    var widgetOrder = ['#widgetC','#widgetE','#widgetA','#widgetD','#widgetB'];
    for (var widgetIndex = 0; widgetOrder.length; widgetIndex++) {
        var singleWidget = widgetOrder[widgetIndex];
        $('#widgets').append($(singleWidget));
    }
});

次の HTML になります。

<div id="widgets">
    <div id="widgetC">C</div>
    <div id="widgetE">E</div>
    <div id="widgetA">A</div>
    <div id="widgetD">D</div>
    <div id="widgetB">B</div>
</div>

このコードは、このような jQuery cookie プラグインを使用して、要件を満たすように適合させることができます。

于 2009-08-19T22:10:16.297 に答える
1

特別に注文されたjQueryオブジェクトを最初に構築できる限り、単一のappendToまたは呼び出しを使用してこれを行うことができます（どちらでも違いはありません）。prependTo

Marve の回答と同じマークアップを使用する:

$(function() {
  $('#widgetC').
    add('#widgetE').
    add('#widgetA').
    add('#widgetD').
    add('#widgetB').
    appendTo('#widgets');
});

ただし、上記で行ったように連鎖させるのではなく、おそらく空のjQueryオブジェクトから始めて ( use )、Cookie の値を反復処理する必要があります。$([])

実際、よく考えてみると…

$(function() {
  var order = 'CEADB'; // from cookie
  $(
    $.map(order.split(''), function(letter) {
      return $('#widget' + letter);
    })
  ).appendTo('#widgets');
});
于 2009-08-19T22:22:48.110 に答える
0

これを行うために使用できるjQueryメソッドは1つではないと思いますが、各DIVを変数に複製し、domから元の値を削除し、複製されたバージョンを追加することで、これを非常に簡単に実行できるようです。希望の順序で本文に戻ります（3つの標準jQueryメソッドを使用）。

var thisOne = $('div.thisOne').clone();
var thatOne = $('div.thatOne').clone();
$('div.thisOne, div.thatOne').remove();
$('body').append(thatOne + thisOne);
于 2009-08-19T21:38:52.303 に答える