jQuery - 移动元素并返回到它之前的确切位置？

Question

我正在尝试使用 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 中相对于文档或其他指定父容器的确切位置）来确保每个“移动”div 返回到其之前的确切位置？

编辑：我已经更正了 div 上的类，因为我正在处理的特定情况是列表项彼此完全相同（结构上），并且在它们各自的元素中具有独特的内容。此外，将“移动”div 移回其原始位置的事件是在其中单击的按钮。被移动的元素如何知道移动后要回到哪里（具体来说，它如何知道列表中的哪个列表项）？

Answer 1

你可以clone他们，append他们，最后hide原始div，作为回报remove克隆的div和show原始。

Answer 2

在移动元素之前，将其.parent() 存储在一个变量中，然后在准备好时使用.append() 或.appendTo() 将其返回。

Answer 3

以下是我所做的。您的帖子遗漏了一些重要的细节，所以我猜测一下，希望它们适用于您的情况。

我猜你在div.move 元素上有一个点击处理程序，将它们移动到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
     }
 });

点击第一个div.move后，您的 HTML 将如下所示：

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

干杯