Thanks for the great test case. Would you mind attaching this to a new
ticket?

http://dev.jqueryui.com/newticket (note: requires registration)

I want to take a look at it tonight. Thanks.

- Richard

On Tue, Feb 3, 2009 at 1:54 PM, Silverstorm <[email protected]> wrote:

>
> Hi!
>
> I'm developing some tool prototype where I have DIV (313x213px)
> container with image background and I want to create draggable &
> resizeble box inside that DIV that allows users to mark some area over
> image. Covered area offset & size are very important for me, because I
> need to store this data for other operations. So I have the following
> sample code in prototype:
>
> <style type="text/css">
> @import 'themes/base/ui.all.css';
> #draggable {
> width: 50px;
> height: 50px;
> background:#FF9;
> margin:0;
> padding:0;
> }
> .demo {
> margin:100px auto 0 auto;
> padding:0;
> background:#fff url(someimage.png) no-repeat top center;
> width:313px;
> height:213px;
> }
> body {margin:0;padding:0;}
> </style>
> <script type="text/javascript">
> $(document).ready(init);
> function init() {
>        $('#draggable').resizable({
>
> containment:'parent',
>                                                          minHeight:
> 30,
>                                                          minWidth :
> 30,
>                                                          stop     :
> function(event, ui){
>
> console.log('Position after resizing. top: ' + ui.position.top + '
> left: ' + ui.position.left);
>
> console.log('Current element size. height: ' + ui.size.height + '
> width: ' + ui.size.width);
>                                                          }
>                                                          }).draggable
> ({
>
> containment : 'parent',
>
> opacity     : 0.6,
>
> stop        : function(event, ui){
>
> console.log('Drag position. top: ' + ui.absolutePosition.top + ' left:
> ' + ui.absolutePosition.left);
>                                                          }
>                                                          }).css
> ('opacity', 0.8);
>
> }
> </script>
>
> <div class="demo">
> <div id="draggable" class="ui-widget-content"></div>
> </div>
>
> 1. Lets move box to the top right corner.
> Console: Drag position. top: 0 left: 261
> Looks good. Resulting positions are based on parent div, fine.
>
> 2. Lets resize the box a little. Whooops!
> Console: Position after resizing. top: 100 left: 824
> Console: Current element size. height: 30 width: 30
> Grrrr, positions are now based on 'window' instead of parent element!
>
> 3. Lets move box somewhere.
> Console: Drag position. top: 186 left: 647
> Seems that ui.position info now based on 'window' here too.
>
> This a bug or reasonable behaviour? Seems a little bit strange for me.
> I don't like the idea of using custom plugin for getting dimensions,
> was rather looking for inbuild functionality.
>
> Regards,
> Silverstorm
>
> >
>

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

Reply via email to