jQuery - Element verschieben und an die genaue vorherige Position zurückkehren?

Question

Ich versuche mit jQuery ein Element von einem Ort zu einem anderen im DOM zu verschieben. Es gibt Elemente, die mit dem Ursprungscontainer daneben identisch sind. Wie kann ich den genauen vorherigen Speicherort speichern, damit er dorthin zurückkehrt? Hier ist ein Beispiel ...

<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> 

... die „move“ divs individuell auf den „Container“ div bewegen, dann wieder in ihre vorherige Position auf einer Veranstaltung über jQuery .appendTo(). Wie stelle ich sicher, dass jedes "move" -Div an seinen exakten vorherigen Speicherort zurückkehrt, indem erkannt wird, von wo es verschoben wurde (die genaue Position im DOM relativ zum Dokument oder ein anders angegebener übergeordneter Container)?

BEARBEITEN: Ich habe die Klassen auf den Divs korrigiert, da der spezifische Fall, mit dem ich arbeite, die Listenelemente exakte Duplikate von einander (strukturell) mit einzigartigem Inhalt innerhalb ihrer jeweiligen Elemente hat. Das Ereignis, um ein "move" -Div an seinen ursprünglichen Ort zurück zu bewegen, ist ein Knopf, der darin geklickt wird. Wie weiß das bewegte Element, wohin es zurück bewegt werden soll (genauer, wie weiß es, welches Listenelement in der Liste ist)?

Answer 1

Bevor Sie das Element verschieben, speichern Sie es .parent() in einer Variablen, dann verwenden Sie .append() oder , um es zurückzugeben, wenn Sie bereit sind.

Answer 2

Sie können sie clone, append sie, und schließlich hide das Original div, und im Gegenzug remove das geklonte div und show das Original.

Answer 3

Unten ist was ich getan habe. Dein Beitrag lässt einige wichtige Details aus, damit ich rate und hoffe, dass sie auf deine Situation angewendet werden.

Ich rate mal, Sie haben einen Klick-Handler auf die div.move Elemente, die sie in die container div bewegt.

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 
    } 
}); 

Ihre HTML wie dies nach dem Klicken auf den ersten div.move aussehen:

<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> 

Ich habe diese Arbeit, obwohl die oben

Code ist nicht getestet. Hoffentlich vermittelt es die Idee. Ich mag an diesem Ansatz:

1. Vervielfältigung von Elementen (die Anforderungen eindeutige ID brechen kann, zum Beispiel)
2. Minimal DOM Auswirkungen
3. Events und Handler auf bewegte Gegenstände bleiben intakt, sind aber nicht
dupliziert

Ist es perfekt? Nein, aber es funktioniert gut und ist ziemlich sauber. YMMV.

Prost