jquery UI draggable resizable with containment does not work in ie9? - jquery-ui

Question

The code works on Chrome and I am trying to get the code to work on ie9. It works properly with the draggable() without containment but messes up the behavior badly when containment is set to parent:
img = $("<img alt='Preview' id='preimg' src='" + data.result.url +"' />")
$('#preimage').append(img);
$('#preimage').resizable({
'aspectRatio':true,
'handles':"all",
'autoHide':true,
containment: "parent"
}).draggable({
containment: "parent"
});
The parent position is set to relative. I am using jquery 1.7.2 and jquery-ui 1.8.20
Is there any workaround?
EDIT
After much testing - I have found that the container size calculation for the div is not working correctly, I was able to get it to work with the resizable enabled but without actually resizing the div. As soon as I resize the draggable containment area reduces in size, resizing multiple times leads to this area becoming smaller until the drag option stops working.

Answer 1

I found that there are several bug reports with the jquery ui library about these issues - http://bugs.jqueryui.com/report/10?P=resizable
I was able to find a work around that I tested extensively and which should work in most situations. The key here is that you need to use a container div that is not floated and has position relative. If you need to use a floated/absolute div just create a div inside it and set the position to relative. For the code in the question the html looks like:
<div class="outer">
<div class="container">
<div id="preimage"></div>
</div>
</div>
and the css would be:
.outer{
position:absolute;
right:0;
}
.container{
position: relative;
}
Since you can't drag an element when you resize and vice-versa, a safer way(to avoid some of the issues) of using the javascript would be:
$('#sqoutline2').resizable({
'handles':"all",
'autoHide':false,
containment: "parent",
start:function(){$('#sqoutline2').draggable('options','disabled','true');},
stop:function(){$('#sqoutline2').draggable('options','disabled','false');}
}).draggable({containment:"parent",
start:function(){$('#sqoutline2').resizable('options','disabled','true');},
stop:function(){$('#sqoutline2').resizable('options','disabled','false');}
});