jQuery - तत्व ले जाएं और अपने सटीक पिछले स्थान पर वापस आएं?

Question

मैं डीओएम में एक स्थान से दूसरे स्थान पर तत्व को स्थानांतरित करने के लिए 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> 

... "चाल" divs व्यक्तिगत रूप से "कंटेनर" div करने के लिए वापस अपने पिछले स्थान पर एक घटना पर jQuery .appendTo के माध्यम से आगे बढ़ रहे हैं, तो()। मैं यह सुनिश्चित कैसे कर सकता हूं कि प्रत्येक "चाल" div अपने सटीक पिछले स्थान पर लौटता है कि यह कहां से स्थानांतरित किया गया था (दस्तावेज़ के सापेक्ष डीओएम में इसका सटीक स्थान, या अन्यथा निर्दिष्ट माता-पिता कंटेनर)?

संपादित करें: मैंने divs पर कक्षाओं को सही किया है क्योंकि विशिष्ट मामले के साथ मैं काम कर रहा हूं, सूची आइटम एक दूसरे (संरचनात्मक रूप से) के सटीक डुप्लिकेट हैं, उनके संबंधित तत्वों के भीतर अद्वितीय सामग्री के साथ। साथ ही, "मूव" div को अपने मूल स्थान पर वापस ले जाने की घटना एक बटन है जिसमें इसके अंदर क्लिक किया गया है। स्थानांतरित तत्व को कैसे पता चलेगा कि एक बार स्थानांतरित करने के लिए कहां जाना है (विशेष रूप से, यह कैसे पता चलता है कि सूची में कौन सी सूची वस्तु है)?

Answer 1

तत्व को स्थानांतरित करने से पहले, .parent() को एक चर में स्टोर करें, फिर तैयार होने पर इसे वापस करने के लिए .append() या .appendTo() का उपयोग करें।

Answer 2

आप उन्हें clone कर सकते हैं, append उन्हें, और अंत में hide मूल div, और बदले remove क्लोन div और show मूल में।

Answer 3

नीचे मैंने जो किया है। आपकी पोस्ट कुछ महत्वपूर्ण विवरण छोड़ देती है, इसलिए मुझे लगता है और उम्मीद है कि वे आपकी स्थिति पर लागू होंगे।

मुझे लगता है कि आपके पास div.move तत्वों पर एक क्लिक हैंडलर है जो उन्हें container div में ले जाता है।

सीएसएस:

.placeholder { display:none; } 

जे एस:

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. मिनिमल डोम प्रभाव
3. घटनाक्रम और चले गए वस्तुओं पर संचालकों बरकरार रहेगा लेकिन
डुप्लिकेट नहीं किए: मैं इस दृष्टिकोण के बारे में क्या पसंद

क्या यह सही है? नहीं, लेकिन यह अच्छी तरह से काम करता है और बहुत साफ है। YMMV।

चीयर्स