jQuery UI Draggable/Sortierbar - Dynamisch hinzugefügte Elemente nicht ziehbar

Question

Ich habe einen Draggable/Sortier-Satz von Listen, denen ich Elemente dynamisch hinzufüge, aber das Problem ist, dass ein einmal hinzugefügtes Element nicht verschoben werden kann zu den neuen Listen. Sie können die Funktionalität hier sehen: http://jsfiddle.net/Y4T32/2/

Ziehen Sie ein Element aus der Liste auf eine der Ziellisten, und Sie werden sehen, dass ich meine. Fügen Sie nun ein "Callout" hinzu und versuchen Sie, das neue Objekt in eine der Zielspalten zu ziehen.

Ich habe hier eine andere Antwort gefunden, die funktioniert, wie ich will, aber die Ergebnisse, die sie bekommen haben, nicht reproduzieren konnte (und natürlich kann ich die Antwort jetzt nicht finden). Irgendein Einblick in das, was ich hier falsch mache?

Answer 1

AKTUALISIERT ANTWORT

Sie haben für jedes Element .draggable() aufzurufen, die hinzugefügt wird. Der jQuery-Selektor, den Sie zum Zeitpunkt der Initialisierung verwenden, gilt nur für Elemente, die derzeit vorhanden sind, und nicht für diejenigen, die Sie erstellen.

Hier einige JS, die funktionieren sollte:

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/