jQuery UI Przeciąganie/sortowanie - Dynamicznie dodawana pozycja nie przeciągalna

Question

Mam listę zestawów możliwych do przeciągnięcia/sortowania, do której dynamicznie dodajem elementy, ale problem polega na tym, że po dodaniu elementu nie można ich przenieść do nowych list. Możesz zobaczyć funkcjonalność tutaj: http://jsfiddle.net/Y4T32/2/

Przeciągnij element z dostępnej listy do jednej z list docelowych, a zobaczysz, że mam na myśli. Teraz dodaj "objaśnienie" i spróbuj przeciągnąć nowy element do jednej z kolumn docelowych.

Znalazłem tu inną odpowiedź, która działa tak, jak chcę, ale nie udało mi się odtworzyć wyników, które otrzymali (i oczywiście nie może teraz znaleźć odpowiedzi). Jakiś wgląd w to, co robię źle tutaj?

Answer 1

AKTUALIZACJA ODPOWIEDŹ

Trzeba zadzwonić .draggable() dla każdego elementu, który zostanie dodana. Selektor jQuery, którego używasz w czasie inicjalizacji, dotyczy tylko elementów istniejących w danym momencie, a nie tych, które utworzysz.

Oto niektóre JS, który powinien działać:

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/