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

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

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

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

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

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