jQuery UI : draggable div moves out of its constrain area when also using resizable

Question

I'm trying to use .draggable() and .resizable() at the same time on a div located into a contrainer (which is its constrain area).

The resize function works perfectly. The draggable function works fine too except when you move the div against one border of the container (let's say the bottom one), release the mouse button, and then try to move it once again outside of the container. Its looks to "push" the div out of its container 1px at a time. If you repeat the operation multiple times, it's possible to move the div completely outside of its container.

$(".element").draggable({ containment: "#container" });
$(".element").resizable({ containment: "#container", handles: 'all' });

Here is the fiddle : http://jsfiddle.net/GarjX/

notice that when you remove the "resizable" function and only keep the draggable the problem is gone.

Answer 1

I know this is an old post but I had the same issue, it's an open bug on jquery ui. here is a solution in the mean time, just add (after the ui css)

.ui-resizable-s, .ui-resizable-e{width:0px; height: 0px; display: none;}

that's it!