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>

...“move”div分别移动到“容器”div，然后通过jQuery .appendTo（）返回到事件的先前位置。如何确保每个“move”div返回其确切的先前位置，方法是检测它的移动位置（它在DOM中相对于文档的确切位置，或者另外指定的父容器）？

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

Answer 1

您可以clone他们，append他们，最后hide原始div，然后返回remove克隆的div和show原始div。

Answer 2

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

我猜你会在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>

我有这个工作，虽然上面的代码是未经测试的。希望它传达了这个想法。我喜欢这种方法：

不重复元素（例如，可能会破坏唯一ID要求）
最小的DOM影响
已移动项目的事件和处理程序保持不变但不重复

完美吗？不，但它运作良好，非常干净。 YMMV。

干杯

Answer 3

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

jQuery - 移动元素并返回其确切的先前位置？

3 个答案: