jQuery - move element and return to its exact previous location?

Question

I'm trying to use jQuery to move an element from one location to another in the DOM. There are elements identical to the originating container alongside it, so how do I store its exact previous location so it will return back to it? Here's an example...

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

...the "move" divs are individually moving to the "container" div, then back to their previous location on an event via jQuery .appendTo(). How do I ensure each "move" div returns to its exact previous location by detecting where it was moved from (its exact location in the DOM relative to the document, or an otherwise specified parent container)?

EDIT: I have corrected the classes on the divs since the specific case I'm working with has the list items being exact duplicates of one another (structurally), with unique content within their respective elements. Also, the event to move a "move" div back to its original location is a button clicked within it. How does the moved element know where to move back to once moved (specifically, how does it know which list item within the list)?

Answer 1

you can clone them, append them , and finally hide the original div, and in return remove the cloned div and show the original.

Answer 2

Below is what I did. Your post leaves out some important details so I'll guess and hopefully they'll apply to your situation.

I'm going to guess you have a click handler on the div.move elements that moves them into the container div.

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

Your HTML would look like this after clicking on the first 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>

I have this working, though the above code is untested. Hopefully it conveys the idea. What I like about this approach:

1. No duplication of elements (which may break unique ID requirements, for example)
2. Minimal DOM impact
3. Events and handlers on moved items remain intact but are not duplicated

Is it perfect? No. But it works nicely and is pretty clean. YMMV.

Cheers

Answer 3

Before moving the element, store its .parent() in a variable, then use .append() or .appendTo() to return it when ready.