How to prevent Resizable and Draggable elements from changing to each other?

Question

Hey there. I have the following code:

http://jsfiddle.net/g7Cgg/

As you can see, there are two simple DIVs that are stacked on top of each other. Each of these DIVs is also configured to resize and drag. However, notice when you try to resize the first element, the second element collapses to the first. From what I see, this is because resizable changes the element to an absolute position. How can I prevent this behavior? Can I resize an element while retaining the ability to drag an element?

Note also that if you change the elements to a relative position (add the position: relative! Important in the .demo style), it seems to prevent collapsing, but the element “skips” when you start resizing or dragging. Another weird behavior. Thank you for your help.

Answer 1

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

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 resize event, set the relative position (using draggable and resizable in agreement, absolute positioning is added) and set the top and left sides to 0 to prevent the “jump” that you sometimes see. In a stop event, discard these changes. Works in my case, YMMV.

Answer 2

Found a simpler solution (which fits my needs);

Inside jquery-ui.css set the desired position and add! It is important to make sure that it remains:

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

Answer 3

Chrome developer tools show that the jQuery user interface uses the style="position:relative" attribute when the user drags / resizes. This will override any .demo{position:absolute} in CSS.

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

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

Answer 4

Use this code to save an item in window space without scrolling when dragging:

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

Answer 5

Just set #container to position: relative; . http://jsfiddle.net/g7Cgg/1/