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 - 移動元素並返回到其確切位置？

回答

相關問題