You have set .draggable to be called as soon as the document is ready,
making any element with the id of 'myNewDiv' draggable. The problem is,
you're not creating that element until you click on a link. See

http://docs.jquery.com/Frequently_Asked_Questions#Why_doesn.27t_an_event_work_on_a_new_element_I.27ve_created.3F

One way to fix this is create the element and then immediately call
.draggable on it, like so

$('<div id="myNewDiv">test div its
draggable</div>').appendTo("#insideParent");
$('#myNewDiv').Draggable(); // capital D draggable is Interface, jQuery UI
would be lowercase d draggable

Also, it looks like you're using the old Interface library, which is no
longer supported. Have you tried jQuery UI?

http://ui.jquery.com/

- Richard

On Tue, Jan 6, 2009 at 6:10 PM, merihsaka...@yahoo.com <
merihsaka...@yahoo.com> wrote:

>
> Hi all ,
> I have a poroblem with new created div.. draggable function is not
> working.
>
> normally draggable div is working successfull like this code.
>
> <html>
> <head>
> <script src="js/dragYeni/jquery.js"></script>
> <script type="text/javascript" src="js/iutil.js"></script>
> <script type="text/javascript" src="js/idrag.js"></script>
> </head>
>
> <body>
> <div id="parentElem">
>       <div id="insideParent"></div>
> </div>
>
> <script type="text/javascript">
>    jQuery(document).ready(
>            function()
>            {
>                    jQuery('#insideParent').Draggable(
>                            {
>                                    zIndex:     1000,
>                                    ghosting:   false,
>                                    opacity:    0.7,
>                                    containment : 'parent'
>                            }
>                    );
>            }
>    );
> </script>
> </body>
> </html>
>
> -------------------------
>
> *** But the problem is starting when I create a new div..
> I can add a new div, there is no problem there.. but its not
> draggable..
>
> <html>
> <head>
> <script src="js/jquery.js"></script>
> <script type="text/javascript" src="js/iutil.js"></script>
> <script type="text/javascript" src="js/idrag.js"></script>
>
> <script>
> function addEvent() {
>  var ni = document.getElementById('insideParent');
>  var divIdName = "myNewDiv";
>  var newdiv = document.createElement('div');
>  newdiv.setAttribute("id",divIdName);
>  newdiv.innerHTML =  "test div its draggable";
>  ni.appendChild(newdiv);
> }
> </script>
>
> </head>
>
> <body>
>
> <a href="javascript:;" onclick="addEvent();" > add new div </a>
>
>
> <div  id="parentElem">
>       <div id="insideParent"></div>
> </div>
>
> <script type="text/javascript">
>    jQuery(document).ready(
>            function()
>            {
>                    jQuery('#myNewDiv).Draggable(
>                            {
>                                    zIndex:     1000,
>                                    ghosting:   false,
>                                    opacity:    0.7,
>                                    containment : 'parent'
>                            }
>                    );
>            }
>    );
> </script>
> </body>
> </html>
>
>
> I need help..
>
> thanks alot..

Reply via email to