jQuery यूआई ड्रैगगेबल/सॉर्ट करने योग्य - गतिशील रूप से जोड़े गए आइटम ड्रैगगेबल

Question

मेरे पास एक ड्रैगगेबल/सॉर्ट करने योग्य सेट सूचियों का सेट है जो मैं गतिशील रूप से आइटम जोड़ रहा हूं, लेकिन समस्या यह है कि एक बार आइटम जोड़ा जाने के बाद, उन्हें स्थानांतरित करना संभव नहीं है नई सूचियों के लिए। आप यहां कार्यक्षमता देख सकते हैं: http://jsfiddle.net/Y4T32/2/

किसी आइटम को उपलब्ध सूची में से किसी एक सूची सूची में खींचें, और आप देखेंगे कि मेरा मतलब है। अब एक "कॉलआउट" जोड़ें और नए आइटम को लक्षित कॉलम में खींचने का प्रयास करें।

मुझे यहां एक और जवाब मिला जो मैं चाहता हूं, लेकिन वे जो परिणाम प्राप्त कर चुके हैं उन्हें पुन: उत्पन्न करने में असमर्थ रहे हैं (और निश्चित रूप से, अब जवाब नहीं मिल रहा है)। मैं यहां क्या गलत कर रहा हूं में कोई अंतर्दृष्टि?

Answer 1

UPDATED उत्तर

आप प्रत्येक तत्व जुड़ जाता है कि के लिए .draggable() कॉल करनी होगी। प्रारंभिक समय पर उपयोग किए जाने वाले jQuery चयनकर्ता केवल उस समय मौजूद तत्वों पर लागू होते हैं, जिन्हें आप बनाएंगे।

var draggable_opts = { 
      connectToSortable: ".sph-callout-portlet", 
      helper: "clone", 
      opacity: 0.75, 
      revert: 'invalid', 
      stop: function(event, ui) { 
       //alert(ui) 
      } 
     }; 

$(function() { 
    $(".sph-callout-portlet").sortable({ 
     opacity: 0.75, 
     placeholder: "ui-state-highlight", 
    }).disableSelection(); 

    $("#sph-callout-portlet-avail li").draggable(draggable_opts); 

    $(document).on("click",'#addNewCo',function(e){ 
     e.preventDefault(); 
     var newCo = $('<li>New Callout</li>').draggable(draggable_opts); 
     $('#sph-callout-portlet-avail').append(newCo); 
    }); 
});​ 

http://jsfiddle.net/SGevw/