drggable problem with dynamically created divs

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

drggable problem with dynamically created divs

Adesh D'silva
 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 thegghghjikiuufkifgkeumqdm


m