Dynamically Added Draggable Will Not Drag

Question

I add dynamically a DIV dynamically, but when I click and hold it to drag it, it will not drag. I add it like this:

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

where leftSlotContent is shaped <div id="puzzlePiece_left_2" class="personal draggable ui-draggable">....</div>and firstID is puzzlePiece_left_2.

After adding the element, I used the Inspect Element element (in Chrome) to see the actual code generated, and looks like this:

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

Why not drag?

Answer 1

Most likely, because the element did not exist when you executed the code to configure the drag and drop. You need to register this with the live () listener.

EDIT

, , live() . , , , .

, , - $('.draggable') - .draggable(), . , , . "" , , , .

$('.draggable') DIV , . , , , - $('.draggable'), draggable. , , , - .

, , :

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

... , , :

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

.

Answer 2

, jquery, , , , , , ui-draggable.

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