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
-~----------~----~----~----~------~----~------~--~---
