Почему не работает Drag&Drop для новых блоков?

Question

[Slava Kolos]

Почему то не работает droppable для новых блоков.
Функция Drag&Drop :

$('.key').draggable({revert: 'invalid',revertDuration: 200,helper: "clone" });
$('#s1').droppable({
    drop: function (e, ui) {
        switch(ui.draggable.attr('id')) {
            case 'id1':
                $( this ).html( "id1" );
                break;
            case 'id2':
                $( this ).html( "id2" );
                break;
            default:
                alert('Other block');
        }
    }
});

После клика создаю новый элемент и у него не работает droppable:

newDiv = $('<div  class="box " id="s1"> ').appendTo('#workingGrid');

В чем может быть причина?

Comments

[Slava Kolos]

уточню что id созданного DI-ва генерируется при нажатии кнопки зависимости от выбранных пунктов , он может быть id =' s1s2s3s4 '

то есть ему задается отдельное событие

$('#s1s2s3s4').droppable({


    drop: function (e, ui) {

        switch(ui.draggable.attr('id')) {
            case 'id1':
                $( this ).html( "id12" );
                break;
            case 'id2':
                $( this ).html( "id21" );
                break;
            default:
                alert('Other block');
        }
    }
});

Answer 1

[Юрий Лобанов]

Послушайте, я не понимаю того, о чем Вы говорите.
Вот пример с draggable, зачем Вам вообще инициировать новый droppable по id, делайте по имеющейся переменной newDiv.
jsfiddle.net/iiil/94Ws5/12
У новых элементов droppable работает

Comments

[fabrykant]

@iiil извените пожалуйста, удалил.

[Юрий Лобанов]

@fabrykant, я не понял, зачем Вы это сделали. Оба Ваши варианта. Первый не отвечал требованиям, так как Вы сделали новые элементы передвигаемыми, а не ловящими. Второй Вы сделали правильно, однако по смыслу ничего не изменили, только вынесли в отдельную функцию, что кстати под вопросом о необходимости.
Мой вариант естественно писан на коленке и только чтобы показать, что новые элементы прекрасно ловят передвигаемые элементы, вопрос в данном случае именно в этом.
Ну и так, если считаете, что делаете пример лучше, потрудитесь хоть отписаться, как именно Вы его улучшили.

[Slava Kolos]

@iiil Спасибо за подсказку, я решил по Вашему примеру сделать switch на проверку id в newDiv-ве , теперь все работает.

[Юрий Лобанов]

@kolosslava, отлично, если работает. Естественно, я не вдавался в подробности конкретно Вашего случая, я всего-лишь показал, что новые элементы будут принимающими. А функции Вы уж сами навесите )

Answer 2

[Константин Китманов]

Потому что уже навешенный плагин ничего не знает про новые элементы. Надо его навесить заново при добавлении элемента.

Answer 3

[Юрий Лобанов]

Так как Вы создаете новый элемент - то на него достаточно навесить newDiv.droppable({...}) с теми же параметрами. Если бы Вы его копировали, то надо было бы больше делать :)

Comments

[Slava Kolos]

@iiil просто навесить newDiv.droppable({...}) не получится, у созданного элемента с id, соответствует отдельное событие