CODEWITHSUNDEEP
jqueryjquery-uidraggable
pahnin
pahnin

Reputation: 5588

jQuery UI draggable not working with dynamically created divs

I have included jquery-1.7.2.min first and then jquery-ui-1.8.21.custom.min

then I have dynamically created divs with a class name and I called draggable and selectable on them but it is not working. in dom ready

   $.each(a, function (l, i) {
       $('.browser').append("<div class='folder' id=" + i + "></div>");
   });
   $('.folder').selectable().draggable();

Here is the fiddle link http://jsfiddle.net/2Nh5m/

Upvotes: 3

Views: 2001

Answers (2)

iiR
iiR

Reputation: 747

The problem is in the applying of the draggable function.

Usually, the draggable function is applied to the elements as soon as document it ready like the code below.

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

This applies the draggable function only for those elements which already exists so it will not work for any element created afterwards.

The solution is to apply the function to the newly created elements too. As soon as the element is created use the same code as above to apply to any newly created element.

Upvotes: 0

Ram
Ram

Reputation: 144729

just reverse the order of calling draggable() and selectable() and it will work:

$('.folder').draggable().selectable()

http://jsfiddle.net/2Nh5m/1/

Upvotes: 1

Related Questions