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 中相对于文档的确切位置，或以其他方式指定的父容器）来确保每个“移动”div 返回到其确切的先前位置？

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

4

3 回答 3

4

您可以使用clone它们，append它们，最后hide是原始 div，并作为回报remove克隆 div 和show原始 div。

于 2012-05-14T22:12:51.643 回答
2

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

于 2012-05-14T22:10:56.547 回答
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 回答