jQueryUI: ड्रैग करने योग्य तत्व को ठीक से निकालना

Question

मैं एक विज़ुअल एडिटर पर काम कर रहा हूं जिसके लिए उपयोगकर्ता तत्वों को जोड़ना, निकालना और खींचना पसंद कर सकते हैं। प्रत्येक तत्व एक div jQueryUI के साथ खींचने योग्य बनाया गया है। नए तत्व एक माता-पिता div में कार्यरत हैं जो वर्कस्पेस का प्रतिनिधित्व करता है। प्रत्येक तत्व में इसे हटाने के लिए अपने अंदर एक बटन होता है। यह सब महान काम करता है।

मेरी समस्या यह है कि जब मैं एक तत्व को हटाता हूं जिसे हाल ही में बनाया गया नहीं था, तो अन्य सभी खींचने योग्य तत्व स्थिति बदलते हैं। यह relative स्थिति का उपयोग कर ड्रैग करने योग्य तत्वों के कारण होता है।

फिलहाल, मेरा निष्कासन समारोह बस $('#item-x').remove() पर कॉल करता है। क्या ड्रैग करने योग्य तत्वों को हटाने का एक और तरीका है?

Answer 1

इस questi बाहर कर देता है पर this one का डुप्लिकेट है, लेकिन मैं गलत चीज़ खोज रहा था।

समाधान अन्य प्रश्नों के अनुसार तत्वों को पूर्ण स्थिति में बदलने के लिए है। मैंने पाया है, तथापि, कि मेरे तत्व हमेशा सापेक्ष स्थिति यहां तक ​​कि जब मैं उनके सीएसएस है कि वे पूर्ण होना चाहिए में निर्दिष्ट करने के लिए वापस लौट आएगा, इसलिए अब मुझे क्या करना:

$('#item-x').draggable().css("position", "absolute"); 

Answer 2

इसके बजाय .draggable("destroy") का उपयोग करने का प्रयास करें। मैंने इसे ठीक इस्तेमाल किया है।

आपको कम से jqueryUI Draggable destroy

अद्यतन

क्षमा करें मैंने सोचा आपकी समस्या को कुछ और ही था इस विधि और सभी अन्य तरीकों, विकल्प और घटनाओं को देख सकते हैं। आपको जो करना है वह आपके दृष्टिकोण को बदलना है, क्योंकि डोम से तत्व को हटाने से वास्तव में draggable तत्व के साथ कोई लेना देना नहीं है। आपको अपने ड्रैगगेबल को तत्व के साथ एन्सेप्लेट करने की आवश्यकता है उदाहरण के लिए एक ड्रैग के साथ एक समान ऊंचाई और चौड़ाई वाला ड्रैग, फिर कृपया ड्रैगगेबल को नष्ट करें।

HTML:

<div id="conteiner"> 
    <div class="dragConteiner"><div id="draggable1" class="draggable"></div></div> 
    <div class="dragConteiner"><div id="draggable2" class="draggable"></div></div> 
    <div class="dragConteiner"><div id="draggable3" class="draggable"></div></div> 
</div> 

jQuery:

$(function(){ 

    $("#draggable1").draggable(); 
    $("#draggable2").draggable(); 
    $("#draggable3").draggable(); 
    $("#draggable2").on('mouseup',function(){ 
    alert('bye draggable!'); 
    $(this).draggable('destroy'); 
    //in case you like to use if after 
    //$(this).hide(); 
    //as in your code 
    $(this).remove(); 
    }) 
}) 

सीएसएस:

.draggable{ 
    height:50px; 
    width:50px; 
    background: green;  
} 

.dragConteiner{ 
    height:50px; 
    width:50px; 
    margin-top:5px;  
} 

#conteiner{ 
    margin-top:25px; 
    margin-left:25px; 
} 

एक jsfiddle उदाहरण

Answer 3

कुछ कारणों से नष्ट समारोह काम नहीं कर रहा। यदि आप तत्व से ड्रैग प्रॉपर्टी को पूरी तरह से निकालना चाहते हैं तो इसे

var temp = $("#dragItem").draggable().remove(); 

यह ड्रैगगेबल प्रॉपर्टी को हटाकर तत्व देता है। एक अस्थायी चर में कैप्चर करें और उसे मूल तत्व

$(temp).appendTo("#parentContainer") 

मुझे यह बताएं कि यह काम करता है या नहीं।