Invalid data from ui.position when using both draggable & resizable options
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-draggable---resizable-options-tp21801994s27240p21801994.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.