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

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

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

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


jquery jquery-ui jquery-ui-draggable jquery-ui-sortable
person Aaron Wagner    schedule 16.05.2012    source источник
comment
Я нашел этот ответ и внесли небольшие изменения. Однако мне кажется, что это не лучший способ сделать это. Я обновил скрипку. jsfiddle.net/Y4T32/7   -  person Aaron Wagner    schedule 17.05.2012

Ответы (1)


arrow_upward
19
arrow_downward

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

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

person ubik    schedule 16.05.2012
comment
Рекомендуется разместить здесь свой код на случай, если jsFiddle когда-либо станет недоступным. Кроме того, объяснение того, что вы сделали, является плюсом. - person j08691; 17.05.2012
comment
@PedroFerreira, это ОЧЕНЬ близко к тому, что я хочу, за исключением того, что я не хочу, чтобы пользователи могли перетаскивать их между столбцами или обратно в доступный столбец. Вот почему я дал им разные имена классов. - person Aaron Wagner; 17.05.2012
comment
@AaronWagner: Хорошо, я неправильно понял, что вы хотели. Вот версия, которая должна работать. - person ubik; 17.05.2012
comment
Идеально! Теперь я вижу, что вы сделали, сделав новый элемент перетаскиваемым перед его добавлением. Умный. Я думал, что пробовал нечто подобное, но безуспешно! Спасибо за помощь! - person Aaron Wagner; 17.05.2012
comment
@PedroFerreira, если вы хотите взглянуть на и этот вопрос, я был бы очень признателен! - person Aaron Wagner; 17.05.2012