jQuery UI Draggable / Sortable - Articles dynamiquement ajoutés non déplaçables

J'ai un Draggable/Sortable ensemble de listes que je suis dynamiquement y ajouter des éléments, mais le problème c'est qu'une fois qu'un élément a été ajouté, il n'est pas possible de les déplacer pour les nouvelles listes. Vous pouvez voir les fonctionnalités ici: http://jsfiddle.net/Y4T32/2/

Faites glisser un élément de la liste disponible à l'une des listes cible, et vous verrez ce que je veux dire. Maintenant, ajoutez un "légende", faites glisser l'élément à l'une des colonnes cibles.

J'ai trouvé une autre réponse ici qui fonctionne comme je veux, mais ont été incapables de reproduire les résultats qu'ils ont obtenu (et, bien sûr, ne peut pas trouver la réponse maintenant). Aucune idée de ce que je fais de mal ici?

source d'informationauteur Aaron Wagner

  1. 19

    MISE À JOUR DE RÉPONSE

    Vous devez appeler .draggable() pour chaque élément qui est ajouté. Le sélecteur jQuery que vous utilisez au temps d'initialisation ne s'applique qu'à des éléments qui existent à l'heure actuelle, pas de ceux que vous allez créer.

    Voici quelques-JS cela devrait fonctionner:

    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/