2

左にフロートされた div がたくさんあるので、ページを埋める行で隣り合って座っています。それらの順序をプログラムで変更したいのですが、それでもフロートさせたいです。

各ボックスのオフセットを取得し、(オフセットを使用して所定の位置に留まるように) 固定位置を指定し、他のオフセットの 1 つにアニメーション化する JS を作成しました。私の問題は、それらを絶対位置から浮動位置に戻す必要があることです。これを行うと、明らかに元の状態に戻ります。

私が知る必要があるのは、各 div のインデックスを設定できるかどうかです。つまり、オフセットをインデックスに関連付けて、各 div のオフセットとインデックスを更新し、フロートされたときに所定の位置に留まるようにすることができます。jQueryを使用してDOM要素のインデックスを設定する方法はありますか?

4

3 に答える 3

5

インデックス自体を設定する必要はありません。コンテナ内の順序を文字通り変更したい。

これは簡単です（DOMまたはjQueryを使用）：要素を前の兄弟の前に移動する場合は、次を使用します。insertBfore prev

var elm = $("selector_for_the_element");
elm.insertBefore(elm.prev());

...または次の兄弟の後に、次を使用します：insertAfter next

var elm = $("selector_for_the_element");
elm.insertAfter(elm.next());

おそらく、アニメーション化が完了したときにこれを行い、divを完全な位置ではなく、フロートに戻します。

実例| ソース

HTML：

<div id="container"></div>

CSS：

#container div {
  float: left;
  width: 4em;
  border: 1px solid black;
  margin: 2px;
  padding: 2px;
}
.left, .right {
  cursor: pointer;
  font-weight: bold;
  font-size: 14pt;
  background-color: #eee;
  border: 1px solid #aaa;
}

JavaScript：

jQuery(function($) {

  var container = $("#container");
  var index;

  for (index = 0; index < 10; ++index) {
    $("<div>d" + index +" <span class='left'>&lt;</span> <span class='right'>&gt;</span></div>")
      .appendTo(container)
      .attr("id", "d" + index);
  }

  container.delegate(".left", "click", function() {
    var div = $(this).closest("div"),
        prev = div.prev();
    if (prev[0]) {
      div.insertBefore(prev);
    }
  });
  container.delegate(".right", "click", function() {
    var div = $(this).closest("div"),
        next = div.next();
    if (next[0]) {
      div.insertAfter(next);
    }
  });

});
于 2012-07-04T09:29:04.677 に答える
0

divを再配置するアニメーションを開始する前に、元の位置とIDをオブジェクトの配列に保存できますか？次に、元の位置を座標としてアニメーションを呼び出す、その配列内のオブジェクトを反復処理する関数がありますか？

実例：http： //jsfiddle.net/JpVS4/3/

HTML：

<div class="moving">Item 1</div>
<div class="moving">Item 2</div>
<div class="moving">Item 3</div>
<div id="move-back">Click to Move To Orignal Pos</div>

CSS：

.moving{
    width: 100px;
    float:left;
}


#move-back{
    position: absolute;
    top: 200px;
    border: 1px solid lightgray;
}

Javascript：

var originalPos =[];

//Store Original

    $(".moving").each(function(){
        originalPos.push({"left":$(this).position().left,"top":$(this).position().top});
    });

    //rearrange
    $(".moving").each(function(i,e){
        $(this).css("position", "absolute");
        $(this).css("left",100 * ((3-i)-1));                
    });


    //move back to original - if needed you could also set top
    $("#move-back").click(function(){
        $(".moving").each(function(i,e){
            var position = originalPos[i];
            $(this).css("left",originalPos[i].left);                
        });
    });
于 2012-07-04T09:29:35.967 に答える
0

最後に、この質問の解決策を自分のニーズを満たすように変更し、非常にうまく機能しました。

jQuery を使用して一連の div 要素をランダム化する

TJクラウダーの助けに感謝します

于 2012-07-10T11:07:26.810 に答える