jquery draggable and resizable containment

Question

I am trying to make a div both re-sizable and draggable with jquery. However the implementation seems to be pretty buggy.

I found several similar questions, but no solution.

• In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously?
• Resizing a JQuery Draggable element's containment parent while dragging

I tried using several position configurations and also tried the refreshPositions option, nothing worked.

The bugs I experience:

• When moving the child item rapidly (specifically when moving in circles), it often breaks and stays out of containment.
• When moving the child to the bottom right corner, then trying to drag the child out of the corner by dragging repeatedly, in each iteration the child breaks the containment a bit further
• When the containment is broken, on the next drag, you can also drag into this broken containment area

I have minimized the example.
This is reproducible in all browsers, all though the fiddle seems to break in IE 10 and opera.

$(".child")
    .draggable({
    containment: "parent",
    cursor: "move"
}).resizable({
    handles: "s,e",
    containment: "parent",
    minHeight: 50,
    minWidth: 50
});

See here for a full but simple example.

http://jsfiddle.net/jxY8M/

How could I fix this containment issue?

Answer 1

This is a problem with the UI draggable itself, the issue has already been reported here

The fixes in your case are (at least in the latest version of Chrome which I'm working on) to

1. Add a 5px padding to the parent, demo found here
2. Add a 5px border to the parent, demo found here
3. Add a 5px margin to the child, demo found here
4. Mixing any of the above for a 5px increase
5. Add overflow:hidden to the parent, demo found here. I have no idea why this one works, but it seems to do the job perfectly

The 5px threshold could be only pertinent to the example, some playing might be necessary in order to get the correct value in your actual case. Some other examples I saw needed less padding or border width, I suppose it's based on how large the elements are somehow, but I'm not sure. I did test the fifth solution in their examples and it seemed to work there as well