jQuery UI Arrastrable/Clasificable: elementos añadidos dinámicamente no arrastrables

Question

Tengo un conjunto de listas arrastrables/clasificables al que estoy agregando elementos dinámicamente, pero el problema es que una vez que se ha agregado un elemento, no es posible moverlos a las nuevas listas. Puede ver la funcionalidad aquí: http://jsfiddle.net/Y4T32/2/

Arrastre un elemento de la lista disponible a una de las listas de destino, y verá que me refiero. Ahora agregue un "texto destacado" e intente arrastrar el nuevo elemento a una de las columnas de destino.

Encontré aquí otra respuesta que funciona como yo quiero, pero no he podido reproducir los resultados que obtuve (y por supuesto, ahora no encuentro la respuesta). ¿Alguna idea de lo que estoy haciendo mal aquí?

Answer 1

RESPUESTA ACTUALIZADO

Tienes que llamar .draggable() para cada elemento que se agrega. El selector jQuery que utiliza en el momento de la inicialización solo se aplica a los elementos que existen actualmente, no a los que creará.

aquí hay algo de JS que debería funcionar:

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/