3

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/

Esailija
  • 138,174
  • 23
  • 272
  • 326
pahnin
  • 5,367
  • 12
  • 40
  • 57

2 Answers2

1

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

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

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

Ram
  • 143,282
  • 16
  • 168
  • 197
  • @pahnin By default, sortable items share draggable properties and this makes a conflict between the the methods. – Ram Jul 01 '12 at 21:10
  • The accepted solution isn't correct either. The selectable still isn't working because if you select a selectable element, the plugin will add a class called ui-selected to the node which isn't happening. The bottom line is that it doesn't seem like draggble and selectable play well together by default. There appears to be another stackoverflow question regarding getting the two to work together http://stackoverflow.com/questions/705250/is-there-a-jquery-plugin-which-combines-draggable-and-selectable – Tri Jul 01 '12 at 21:30
0

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.

iiR
  • 707
  • 1
  • 6
  • 21