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

我正在尝试使用jQuery将元素从DOM中的一个位置移动到另一个位置。 有一些与原始容器相同的元素，因此如何存储其确切的先前位置以便它返回到它？ 这是一个例子……

 
 
 
Content
 
 
Content
 
  

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

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

Answer 1

您可以clone它们， append它们，最后hide原始div，然后remove克隆的div并show原始div。

Answer 2

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

我猜你在div.move元素上有一个click处理程序，它将它们移动到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('
') // 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.move ：

 
 
 
 
Content
 
  

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

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

它完美吗？ 不，但它工作得很好而且非常干净。 因人而异。

干杯

Answer 3

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