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');}
       });