JQuery UI Draggable/Sortable - динамически добавленные элементы, не перетаскиваемые

У меня есть Draggable/Sortable набор списков, в которые я динамически добавляю элементы, но проблема в том, что после добавления элемента невозможно переместить их в новые списки. Вы можете увидеть функциональность здесь: http://jsfiddle.net/Y4T32/2/

Перетащите элемент из доступного списка в один из целевых списков, и вы увидите, что я имею в виду. Теперь добавьте "выноску" и попробуйте перетащить новый элемент в один из целевых столбцов.

Я нашел здесь еще один ответ, который работает так, как я хочу, но не смог воспроизвести полученные результаты (и, конечно, не может найти ответ сейчас). Любое понимание того, что я делаю неправильно здесь?

Ответы

Ответ 1

ОБНОВЛЕННЫЙ ОТВЕТ

Вы должны вызвать .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/