Динамически добавленный Draggable не будет тянуть

Question

Я добавляю перетаскиваемый DIV динамически, но когда я нажимаю и удерживаю его, чтобы перетащить, он не будет перетаскиваться. Я добавляю это так:

$("#leftPersonalContent").append(leftSlotContent);
$("#" + firstID).addClass("ui-draggable");

, где leftSlotContent имеет форму <div id="puzzlePiece_left_2" class="personal draggable ui-draggable">....</div>, а firstID равен "puzzlePiece_left_2".

После добавления элемента я использовал Inspect Element (в Chrome), чтобы увидеть реальный сгенерированный код, и он выглядит так:

<div id="puzzlePiece_left_2" class="personal draggable ui-draggable">....</div>

Почему бы не перетащить?

Answer 1

Скорее всего, потому что элемент не существовал, когда вы выполнили код для настройки перетаскивания. Вам необходимо зарегистрировать это с live () слушателем.

EDIT

Поскольку мы не имеем дело с событиями, я думаю, live() не вариант. Я скоро вернусь к решению, но сначала позвольте мне объяснить, что происходит с вашим текущим кодом, и почему это не работает.

Фрагмент, который вы разместили здесь в комментарии, начинается с поиска набора элементов - $('.draggable') - для последующего вызова .draggable(), чтобы сделать их перетаскиваемыми. Все элементы, возвращаемые этим первым селектором, будут сделаны перетаскиваемыми. Это не какое-то «правило», которое хранится и постоянно проверяется, а просто одноразовое извлечение элементов, к которым можно применить функцию.

В то время, когда этот код выполняется, селектор $('.draggable') не возвращает ваш DIV в наборе результатов, так как он не существует на данный момент. Когда он внезапно появляется, это все равно не меняет того факта, что это не был один из предметов, которые когда-то были возвращены $('.draggable'), когда было инициировано перетаскивание. Он будет возвращен , однако, если бы этот запрос был выполнен сейчас, так что это именно то, что нам нужно сделать - выполнить тот же запрос еще раз.

Поэтому, когда вы добавляете новый элемент, который нужно сделать перетаскиваемым, вам нужно сначала уничтожить ваш текущий перетаскиваемый элемент:

$('.draggable').draggable('destroy');

... и затем создайте его еще раз, теперь, когда новый элемент находится в наборе:

$('.draggable').draggable( { your options... } );

Это должно сделать это.

Answer 2

Если у вас есть селектор jquery, который может найти все элементы, которые вы хотите сделать перетаскиваемыми, когда вы хотите сделать некоторые новые элементы перетаскиваемыми, вы можете использовать тот же селектор в новом выражении, который просто выбирает те из них, которые не имеют перетаскиваемого класса.

$(".selector:not(.ui-draggable)").draggable(draggableOptions);