7

jQuery を使用して、要素を DOM のある場所から別の場所に移動しようとしています。元のコンテナと同じ要素が横にあるので、元のコンテナに戻るように正確な以前の場所を保存するにはどうすればよいですか? ここに例があります...

<div class="container"></div>
<ul>
    <li></li>
    <li><div class="move">Content</div></li>
    <li></li>
    <li><div class="move">Content</div></li>
    <li></li>
</ul>

...「移動」div は個別に「コンテナ」div に移動し、jQuery .appendTo() を介してイベントの前の場所に戻ります。各「移動」div が移動元 (DOM 内でのドキュメントに対する相対的な正確な位置、または指定された親コンテナー) を検出して、正確な以前の位置に確実に戻るようにするにはどうすればよいですか?

EDIT：私が扱っている特定のケースでは、リスト項目が（構造的に）互いに正確に複製されており、それぞれの要素内に一意のコンテンツがあるため、divのクラスを修正しました。また、「移動」div を元の場所に戻すイベントは、その中でクリックされたボタンです。移動された要素は、移動した後にどこに戻るべきかをどのように知るのでしょうか (具体的には、リスト内のどのリスト項目をどのように知るのですか)?

4

3 に答える 3

4

cloneそれら、appendそれら、そして最後hideに元のdivを作成し、その代わりremoveに複製されたdivと元のdivを作成できますshow。

于 2012-05-14T22:12:51.643 に答える
2

以下は私がしたことです。あなたの投稿はいくつかの重要な詳細を省略しているので、私は推測し、うまくいけばそれらがあなたの状況に当てはまるでしょう。

div.move要素をcontainerdivに移動するクリックハンドラーがあると思います。

CSS：

.placeholder { display:none; }

JS：

var id,
    gid = 0;

$('.move').click(function(e){
    if(!$(this).parents('.container')){
        // Move to container
        id = 'placeholder-' + gid++;
        $(this)
            .before('<div class="placeholder ' + id + '"></div>')  // Save a DOM "bookmark"
            .appendTo('.container')                               // Move the element to container
            .data('placeholder', id);                              // Store it's placeholder's info
    }
    else{
        // Move back out of container
        $(this)
            .appendTo('.placeholder.' + $(this).data('placeholder'))  // Move it back to it's proper location
            .unwrap()                               // Remove the placeholder
            .data('placeholder', undefined);        // Unset placeholder data
     }
 });

最初のクリックをクリックすると、HTMLは次のようになりますdiv.move。

<div class="container">
    <div class="move>Content</div>
</div>
<ul>
    <li></li>
    <li><div class="placeholder placeholder-0"></div></li>
    <li></li>
    <li><div class="move">Content</div></li>
    <li></li>
</ul>

上記のコードはテストされていませんが、私はこれを機能させています。うまくいけば、それはアイデアを伝えます。このアプローチの好きなところ：

  1. 要素の重複はありません（たとえば、一意のID要件に違反する可能性があります）
  2. DOMへの影響を最小限に抑える
  3. 移動されたアイテムのイベントとハンドラーはそのまま残りますが、複製されません

完璧ですか？いいえ。しかし、それはうまく機能し、かなりきれいです。YMMV。

乾杯

于 2012-05-14T23:58:51.403 に答える
2

.parent()要素を移動する前に変数に格納し、準備ができたら.append()orを使用して要素.appendTo()を返します。

于 2012-05-14T22:10:56.547 に答える