jQuery UI Draggable/Sortable - Elementi aggiunti dinamicamente non trascinabili

Question

Ho un set di elenchi trascinabili/ordinabili a cui aggiungo dinamicamente gli elementi, ma il problema è che una volta aggiunto un elemento, non è possibile spostarli alle nuove liste. Puoi vedere la funzionalità qui: http://jsfiddle.net/Y4T32/2/

Trascinare un elemento dall'elenco disponibile a uno degli elenchi di destinazione, e vedrai che intendo. Ora aggiungi un "callout" e prova a trascinare il nuovo elemento su una delle colonne di destinazione.

Ho trovato un'altra risposta qui che funziona come voglio, ma non sono stato in grado di riprodurre i risultati ottenuti (e, naturalmente, non è possibile trovare la risposta ora). Qualche idea su ciò che sto facendo di sbagliato qui?

Answer 1

RISPOSTA AGGIORNATO

Bisogna chiamare .draggable() per ogni elemento che viene aggiunto. Il selettore jQuery che usi al momento dell'inizializzazione si applica solo agli elementi che esistono al momento, non a quelli che creerai.

Ecco alcuni JS che dovrebbe funzionare:

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/