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