jQuery UIドラッグ可能/ソート可能 - 動的に追加されたアイテムがドラッグできない

Question

私はアイテムを動的に追加しているリストのドラッグ可能な/ソート可能なリストを持っていますが、アイテムが追加されると移動できません新しいリストに追加します。ここでその機能を見ることができます：http://jsfiddle.net/Y4T32/2/

利用可能なリストからアイテムを1つのターゲットリストにドラッグすると、意味がわかります。 「コールアウト」を追加して、新しい項目をターゲット列のいずれかにドラッグしようとします。

ここで私が望むように動作する別の答えが見つかりましたが、得られた結果を再現することができませんでした（もちろん答えは見つかりません）。私がここで間違っていることについての洞察は？

Answer 1

UPDATED ANSWER

あなたが追加される各要素の.draggable()を呼び出す必要があります。初期化時に使用するjQueryセレクタは、作成する要素ではなく、現時点で存在する要素にのみ適用されます。ここで

作業をする必要があり、いくつかのJSです：

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/