How to prevent Resizable and Draggable elements from collapsing on each other?

Question

Hey all. I have the following code:

http://jsfiddle.net/g7Cgg/

As you can see, there are 2 simple DIVs that are stacked one above each other. Each of these DIVs are also set to be resizable and draggable. However, notice when you attempt to resize the first element, the second element collapses onto the first. From what I can see, this is because resizable changes the element to a position of absolute. How can I prevent this behavior? Is it possible to resize the element while retaining the ability to drag the element?

Note also, that if you change the elements to have a position of relative (add position:relative !important in the .demo style), it sort of prevents the collapsing, but the element "jumps" when you begin to resize or drag. Another weird behavior. Thanks for your help.

Solution 1

In my specific case, here is what I did to fix it:

resizeableObj.resizable({
    start: function(event, ui) {        
        resizeableObj.css({
            position: "relative !important",
            top: "0 !important",
            left: "0 !important"
        });
    },
    stop: function(event, ui) {
        resizeableObj.css({
            position: "",
            top: "",
            left: ""
        });
    }
});

As you can see, in the resizable start event, set the position to relative (by using draggable and resizable in concert, an absolute positioning is added) and set the top and left to 0 to prevent the "jumping" that you sometimes see. In the stop event, reverse these changes. Works in my case, YMMV.

Solution 2

Found a simpler solution (that fits my needs);

Inside jquery-ui.css, set the desired position and add !important to make sure it stays:

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */

Solution 3

Use this code to keep the element within the window space without scrolling while dragging:

$("#draggable").draggable({containment:"window", scroll: false})

Solution 4

Chrome Developer Tools indicates that jQuery UI uses the style="position:relative" attribute while the user is dragging/resizing. This will override any .demo{position:absolute} in the CSS.

The workaround is to set your own style="position:absolute" (you can use jQuery css() method for this) then explicitly set top and left for each div.

 $('.demo').css({position:"absolute"});

View more solutions

Comments

[naivedeveloper]

Tried that. No luck. The lower element still collapses on the upper element when trying to resize.

[naivedeveloper]

It's understandable why it collapses...I mean, in order for you to be able to position the element wherever you want, it has to use absolute positioning, thus taking it out of the flow. I'm just curious is there is any way to use resizable and draggable in this example.

[Jide]

Err... You can't add !important in jQuery css function. As a workaround, add a class on start which has these CSS rules with !important, and remove it on stop.