Jquery draggable नए कंटेनर

Question

से संलग्न है मेरे पास एक मूल div के अंदर एक div है जो उपयोगकर्ता ड्रॉपबॉक्स से final_dest तक खींच सकते हैं। उपयोगकर्ता बटन क्लिक के साथ भी नए आइटम बना सकते हैं। बटन क्लिक नए ड्रॉप को ड्रॉपबॉक्स में जोड़ता है।

<div id='#dropbox'> 
     <div id='item_1'>Some Item</div> 
</div> 

<div id='final_dest'></div> 

एक उपयोगकर्ता एक और कंटेनर के लिए ITEM_1 खींच लेता है, तो मैं कैसे यह ड्रॉपबॉक्स से हटाने और final_dest में रख सकते हैं?

  $('#item_'+a).draggable({ // make this whole damn thing draggable 
        drag:function(event){ 
          helper:"clone", 
          jsPlumb.repaintEverything(); 
        }, 
        stop:function(event,ui){ 
            $('this').detach('#dropbox'); 
            $('this').append('final_dest'); 

        } 

      }); 

मैंने अलग करने का प्रयास करने की कोशिश की है लेकिन ड्रॉपबॉक्स div से इसे हटाने का तरीका नहीं समझ सकता है।

समस्या यह है कि यदि कोई उपयोगकर्ता item_1 को final_dest पर ड्रैग करता है, और उसके बाद एक नया आइटम_2 div बनाता है, तो यह ड्रॉपबॉक्स में item_1 की जगह के नीचे दिखाई देता है। मैं इसे प्रकट करने की कोशिश कर रहा हूं जहां आइटम_1 ने किया था। यह ऐसा करता है, क्योंकि item_1 ड्रॉपबॉक्स से नहीं हटाया जाता है।

Answer 1

आप अपने मूल और गंतव्य तत्वों को इकट्ठा अलग करें, सीएसएस सेट कहते हैं, और ड्रॉप तो जैसे अपने कंटेनर से जुड़ी घटना पर अपनी संलग्न कॉल करने के लिए की आवश्यकता होगी:

$(".droppable").droppable({ 
    accept: ".draggable", drop: function (event, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn); 
    } 
}); 

पूर्ण काम कर रहे उदाहरण यहाँ आप के लिए पाया जा सकता है:

https://jsfiddle.net/gdkx7861/1/