Jquery draggable + resizable element going out of bounds

An element which is has the resizable and draggable Jquery plugin applied to it is going out of bounds if the parent element doesn't have

overflow:hidden;

Applied to it.

Here's the JSfiddle: http://jsfiddle.net/hjtBA/

Try dragging the element to the far most bottom right corner a couple of times. You will see that it is going out of bounds. I figured out that if i set the parent element e.g. #outer to overflow:hidden that the problem is solved.

The problem: I need the parent to have overflow:visible for other CSS to work fine. How else can i resolved the problem without making the parent overflow:hidden?

Thanks in advance!

Resizable transforms the element to be absolutely positioned, so the bounding box is irrelevant,

There seems to be a bug, that you can drag 3px out of the bounding box, so replace your fiddle with this code which adds a 3px snap function so you can't drag 3px out of the boundary :-)

$(function(){
    $('#inner').resizable({
        containment: 'parent'        
        }).draggable({
        containment: 'parent' ,
        snap: "#outer", snapMode: "inner" ,
        snapTolerance: 3       
    });    
});​

You need overflow visible! when the item draggable and resizable, otherwise I found that it caused the item to be irretrievable!