Position problem with draggable

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Position problem with draggable

Andy Kriger

I am brand-new to jQuery (though I am an experienced programmer)
I have a sample page whose behavior I'm not understanding (see the
code that follows this post)

You will need jquery & jquery-ui in the same directory. When you
double-click the div 'center', a new div will be created at the double-
click point. This works fine. However, if you uncomment the .draggable
() line in addDiv the new div will be created at some offset from the
double-click point.

Can anyone give me insight into what's going on in jQuery-ui that
causes this offset and how I might fix it?

Thank you


--- EXAMPLE.HTML ---

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<style type="text/css">
        #center {
                height: 400px;
                width: 400px;
                border: 1px black solid;
                position: relative;
                cursor: default;
        }

        .box {
                border: 1px black solid;
                height: 100px;
                width: 100px;
                position: absolute;
        }
</style>
</head>
<body>
<div id="center">
</div>
<script type="text/javascript">
        $(document).ready(function() {
                $("#center").dblclick(function(e) {
                        addDiv(e.pageX, e.pageY);
                });
        });

        function addDiv(x,y)
        {
                var container = $("#center").position();
                $("<div class='box'></div>")
                        .css("left",x-container.left).css("top",y-container.top)
                        //.draggable()
                        .appendTo("#center");
        }
</script>
</body>
</html>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Position problem with draggable

Andy Kriger

I eventually figured this out - make the div draggable _after_ adding
it to the container
Hope this helps someone...

var div = $("<div class='note'></div>")
                        .css("left",x-container.left).css("top",y-container.top)
                        .appendTo("#center");
div.draggable();

On Dec 21, 9:52 pm, Andy <[hidden email]> wrote:

> I am brand-new to jQuery (though I am an experienced programmer)
> I have a sample page whose behavior I'm not understanding (see the
> code that follows this post)
>
> You will need jquery & jquery-ui in the same directory. When you
> double-click the div 'center', a new div will be created at the double-
> click point. This works fine. However, if you uncomment the .draggable
> () line in addDiv the new div will be created at some offset from the
> double-click point.
>
> Can anyone give me insight into what's going on in jQuery-ui that
> causes this offset and how I might fix it?
>
> Thank you
>
> --- EXAMPLE.HTML ---
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <script type="text/javascript" src="jquery-1.2.6.js"></script>
> <script type="text/javascript" src="jquery-ui.js"></script>
> <style type="text/css">
>         #center {
>                 height: 400px;
>                 width: 400px;
>                 border: 1px black solid;
>                 position: relative;
>                 cursor: default;
>         }
>
>         .box {
>                 border: 1px black solid;
>                 height: 100px;
>                 width: 100px;
>                 position: absolute;
>         }
> </style>
> </head>
> <body>
> <div id="center">
> </div>
> <script type="text/javascript">
>         $(document).ready(function() {
>                 $("#center").dblclick(function(e) {
>                         addDiv(e.pageX, e.pageY);
>                 });
>         });
>
>         function addDiv(x,y)
>         {
>                 var container = $("#center").position();
>                 $("<div class='box'></div>")
>                         .css("left",x-container.left).css("top",y-container.top)
>                         //.draggable()
>                         .appendTo("#center");
>         }
> </script>
> </body>
> </html>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Position problem with draggable

vladfr
God bless!

This problem still happens in IE, even 8, when you have an absolutely positioned draggable.
Thanks for your simple solution, Andy from the past! :)