jQuery - 移动元素并返回到其确切位置？

我想使用jQuery将元素从一个位置移动到DOM中的另一个位置。有些元素与原始容器相同，因此如何存储其确切位置以便返回到原始位置？下面是一个例子...jQuery - 移动元素并返回到其确切位置？

<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分别对事件通过jQuery .appendTo移动到“容器” DIV，然后再回到之前的位置（）。我如何确保每个“移动”div通过检测其移动的位置（它在DOM中的相对于文档的确切位置，还是指定的其他父容器）返回到其确切位置？

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

来源

2012-05-14 Charles

如果你想要比你已有的更好的答案，你应该更新你的HTML代表你所要求的。首先，如果你有“部件标注始发容器沿着它”可以显示2个容器即可。如果您的文档“使列表项目相互重复”，则删除其独特的类别。 –

@FabrícioMatté完成，感谢您的建议。 – Charles

我也会为你的问题提供一个答案，但是用这个HTML很难告诉你所期望的。 –

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

来源

2012-05-14 22:10:56

整洁的答案，我不知道'.parent（）'会存储你调用它的嵌套元素的相对索引。真正有用的信息，我也会尽快给它+1。 –

我制作了一个[fiddle]（http://jsfiddle.net/ult_combo/BTKex/）来检查你的代码的功能，我相信你的代码将来会很有用。 –

由于操作符的问题“这里有与原始容器相同的元素”，所以这不起作用。简单地存储父项不会保留元素在父项中的位置*。 – Madbreaks

可以clone他们，他们append，最后hide原格，并在返回remove克隆的股利和show原。

来源

2012-05-14 22:12:51 undefined

与我打字时的答案完全相同。认为这是最好的方法。 – Anonymous

看起来不错，但是如果OP必须迭代所有元素，例如要抓取数据并发送到另一个页面，他必须添加一个带'.is（'：visible'）'的支票。 –

@FabrícioMatté我不认为div的内容对于存储在db中是有用的。 – undefined

以下是我所做的。你的文章留下了一些重要的细节，所以我猜想，希望他们会适用于你的情况。

我猜你在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 
    } 
});

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

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

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

它是完美的？不，但它很好用，很干净。因人而异。

干杯

来源

2012-05-14 23:58:51 Madbreaks

Downvoter，谨慎解释？ – Madbreaks

jQuery - 移动元素并返回到其确切位置？

回答

相关问题