Anyone?

On Feb 3, 1:19 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
>
> P.S. btw, what is more preffered on this list - real names or nicknames?
> --
> View this message in 
> context:http://www.nabble.com/Invalid-data-from-ui.position-when-using-both-d...
> Sent from the jQuery UI Discussion mailing list archive at Nabble.com.
--~--~---------~--~----~------------~-------~--~----~
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