<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
p
{mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman";}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Good question. I can only guess that
Draggables is probably using offsets to build the containment box and AFAIK,
this does not take into account padding (and it shouldn’t). The use
of offsets was more than likely also the cause of the initial bounding issue
you had. Even though you repositioned the parent using margins, since it
was not relatively or absolutely positioned, the call to get parent offset was
returning the parent’s initial location minus the margin adjustment.
WARNING: These are all just wild guesses off the top of my head, though.
I could be completely wrong ;)<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>-scott<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div style='border:none;border-left:solid blue 1.5pt;padding:0in 0in 0in 4.0pt'>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <b><span style='font-weight:bold'>On Behalf
Of </span></b>Gord Busse
<b><span style='font-weight:bold'>Sent:</span></b> Thursday, March 08, 2007
12:25 PM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] Interface
Draggables Problem</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>Scott,
Thanks, you rock! I knew it had to be something simple.
One more question though. Any idea why it ignores my padding: 10px; setting on
the parent element?
Thanks again,
Gord
<o:p></o:p></span></font>
<div>
<p class=MsoNormal><span class=gmailquote><font size=3 face="Times New Roman"><span
style='font-size:12.0pt'>On 3/8/07, <b><span style='font-weight:bold'>Weaver,
Scott</span></b> <<a href="mailto:weavers@ugs.com">weavers@ugs.com</a>>
wrote:</span></font></span><o:p></o:p>
<div link=blue vlink=blue>
<div>
<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>Ah, easy fix. I went ahead and mimicked your
site. All you need to do to fix this is to set the parent element, #page
in your case, position:relative. Now it works like a charm!</span></font><o:p></o:p>
<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'> </span></font><o:p></o:p>
<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>hth,</span></font><o:p></o:p>
<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'>-scott</span></font><o:p></o:p>
<font size=2 color=navy face=Arial><span style='font-size:10.0pt;font-family:
Arial;color:navy'> </span></font><o:p></o:p>
<div style='border:none;border-left:solid windowtext 1.5pt;padding:0in 0in 0in 4.0pt;
border-color:-moz-use-text-color -moz-use-text-color -moz-use-text-color blue'>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center>
</span></font></div>
<b><font size=2 face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma;
font-weight:bold'>From:</span></font></b><font size=2 face=Tahoma><span
style='font-size:10.0pt;font-family:Tahoma'> <a
href="mailto:discuss-bounces@jquery.com" target="_blank">discuss-bounces@jquery.com</a>
[mailto:<a href="mailto:discuss-bounces@jquery.com" target="_blank">
discuss-bounces@jquery.com</a>] <b><span style='font-weight:bold'>On Behalf Of </span></b>Gord
Busse
<b><span style='font-weight:bold'>Sent:</span></b> Thursday, March 08, 2007
9:52 AM
<b><span style='font-weight:bold'>To:</span></b> JQuery Discuss
<b><span style='font-weight:bold'>Subject:</span></b> [jQuery] Interface
Draggables Problem</span></font><o:p></o:p>
</div>
<div><span id="q_1113269737ebe7f4_1">
<font size=3 face="Times New Roman"><span style='font-size:12.0pt'> <o:p></o:p></span></font>
<font size=3 face="Times New Roman"><span style='font-size:12.0pt'>Greetings,
I am new to JQuery and am very excited to start using it and jump into the world
of javascript programming. I have been experimenting with the Interface plugins
and have come across a problem or possible bug with the Draggable library.
Please see the following page:
<a href="http://www.gordbusse.com/test.htm" target="_blank">http://www.gordbusse.com/test.htm</a>
I have a parent div horizontally centered on the page using:
margin-right: auto;
margin-left: auto;
And have a child div inside that set to be draggable. But the draggable div
does not appear to be obeying the containment: 'parent' command and staying
within the div. In fact it seems that there is a constraint but the constraint
is left justified whereas the parent div is centered? Furthermore the draggable
child div also appears to be ignoring the padding setting of the parent div as
well?
If I take out the auto margin settings to make the parent div left justified it
looks better but it still doesn't seem to be working right?
Am I doing something wrong or is this a bug?
Thanks in advance for any help anyone can give me.
Gord<o:p></o:p></span></font>
</div>
</div>
</div>
</div>
</span>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/" target="_blank">http://jquery.com/discuss/</a><o:p></o:p></span></font>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
</div>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/