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

In jQuery, How to fix containment bug when using resizable() and draggable() simultaneously? is closed, but the solution to that problem is:

add position:relative to the parent/container.

overflow:hidden did not work for me (in Firefox; have not tested other browsers yet)

Answer 2

You may try to use the stop function on the draggable interaction to change the resizable parameters. It helped me when I had similar problems when setting the containment on both resizable and draggable interactions.

Note: this works with a locked aspect ratio on the resizable interaction as well.

Sample:

<div id="container" style="width: 320px; height: 240px; background-color: #000000;">
    <div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;">
    </div>
</div>

<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
    jQuery("#subject").resizable(
    {
        aspectRatio: 4 / 3,
        minHeight: 120,
        minWidth: 160,
        maxHeight: 240,
        maxWidth: 320
    }).draggable(
    {
        containment: "#container",
        stop: function(evt, ui) {
            var container = jQuery("#container");
            var subject = jQuery("#subject");

            var containerPosition = container.position();
            var subjectPosition = subject.position();

            var relativeLeft = subjectPosition.left - containerPosition.left;
            var relativeTop = subjectPosition.top - containerPosition.top;

            var maxWidth = (container.width() - relativeLeft) | 0;
            var maxHeight = (container.height() - relativeTop) | 0;

            subject.resizable("option", "maxWidth", maxWidth);
            subject.resizable("option", "maxHeight", maxHeight);
        }
    });
});
</script>

Answer 3

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