jQuery UI 드래그 가능/정렬 가능 - 동적으로 추가 된 항목을 드래그 할 수 없음

Question

동적으로 항목을 추가하는 목록의 드래그 가능/정렬 가능한 목록이 있지만 문제는 항목이 추가 된 후에는 이동할 수 없다는 것입니다 새 목록에 추가하십시오. 여기에 기능을 볼 수 있습니다 : http://jsfiddle.net/Y4T32/2/

사용 가능한 목록에서 항목을 대상 목록 중 하나로 드래그하면 의미한다는 것을 알 수 있습니다. 이제 "설명 선"을 추가하고 새 항목을 대상 열 중 하나로 드래그 해보십시오.

내가 원하는대로 작동하지만 결과를 재현 할 수없는 또 다른 대답을 발견했습니다 (물론 지금은 답변을 찾을 수 없습니다). 내가 여기서 뭘 잘못하고 있는지에 대한 통찰력?

Answer 1

업데이트] 답변

당신이 추가됩니다 각 요소에 대해 .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/