Re: Draggable Problem With Dynamically Created Divs

Re: Draggable Problem With Dynamically Created Divs

I am creating a chat application where div's are created through innerHTML  dynamically.

I want all these div's to be draggable , so i used the method .draggable to make them draggable.

But this draggable property is not being applied to all the div's but only to the last div created.


For example when div1 is created, it gets the draggable property, but when div2 is created div1

gets disabled i.e it looses its draggable property and is no more draggable,

but div2 is draggable , similarly when div3 is created div1 and div2 loose their draggable property

and only div3 remains draggable and so on.
 
I have created a raw example code:


  1. <html>
  2. <head>
  3. <script type="text/javascript" language="javascipt" src='http://localhost/jm/modules/mod_freichat/jquery/js/jquery.ui.core.min.js'></script>
  4. <script type="text/javascript" language="javascipt" src='http://localhost/jm/modules/mod_freichat/jquery/js/jquery.min.js'></script>
  5. <script type="text/javascript" language="javascipt" src='http://localhost/jm/modules/mod_freichat/jquery/js/jquery-ui.min.js'></script>
  6. <script type="text/javascript" language="javascipt" src='http://localhost/jm/modules/mod_freichat/jquery/js/jquery.ui.draggable.min.js'></script>
  7. </head>
  8. <title>
  9. Testing Draggables
  10. </title>
  11. <body>
  12. <div id="drag">This is a test page for testing multiple draggable divs</div>
  13. <div onmousedown="click()">CLICK ME TO CREATE DRAGGABLES</div>
  14. </body>
  15. </html>
  16. <script>
  17. id=1; 
  18. function click()
  19. {
  20. var str='<div id="dragx'+id+'">Draggable_'+id+'</div>';
  21. $jn("#drag").html($jn("#drag").html()+str);
  22. $jn("#dragx"+id).draggable();
  23. id++;
  24. }
  25. </script>


Can anyone please tell me why is this happening,

is it because i am creating the div's through innerHTML

I would greatly appreciate any solutions to this problem

ThankYou