пользовательского интерфейса jQuery Перетаскиваемым/сортируемый - динамически добавленные элементы не перетаскивать

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

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

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

1 11
jquery jquery-ui-sortable jquery-ui-draggable

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/

19