Responsive jQuery UI with resizable / draggable elements

How about setting the container's height explicitly before the resize takes place?

Ideally, this should have been doable with the start option for .resizable{}, but I tried it out myself, and it did not help. Instead, by binding a .mouseover() to the handle, the desired effect seems to be achieved:

$('.box').resizable({containment: 'parent', handles: "se", create: setContainerResizer, stop:resizeStop})function setContainerResizer(event, ui) {    console.log($(this)[0]);    $($(this)[0]).children('.ui-resizable-handle').mouseover(setContainerSize);}function setContainerSize(el) {    var parent = $(el.target).parent().parent();    parent.css('height', parent.height() + "px");}

JSFiddle: http://jsfiddle.net/w2Jje/4/

Update: In order to retain responsiveness, you can make the height auto once again after the resize is complete. Check the update below.

function convert_to_percentage(el){    var parent = el.parent();    el.css({        left:parseInt(el.css('left'))/parent.width()*100+"%",        top: parseInt(el.css('top'))/parent.height()*100+"%",        width: el.width()/parent.width()*100+"%",        height: el.height()/parent.height()*100+"%"    });    parent.css('height', 'auto'); // Set it back to auto}

JSFiddle: http://jsfiddle.net/w2Jje/5/

Update #2: To get around the case where the mouse never leaves the handle before a second resize, let's reset the height on mouseout instead:

function setContainerResizer(event, ui) {    console.log($(this)[0]);    $($(this)[0]).children('.ui-resizable-handle').mouseover(setContainerSize);    $($(this)[0]).children('.ui-resizable-handle').mouseout(resetContainerSize);}function resetContainerSize(el) {    parent.css('height', 'auto');}

JSFiddle: http://jsfiddle.net/w2Jje/6/

Just wanted to add, the fiddle, and code from the question worked almost perfectly for me, you have to make sure you take into account any padding though when resetting width/height.

el.css({    ...    width: (el.width()+LEFT_PADDING+RIGHT_PADDING)/parent.width()*100+"%",    height: (el.height()+TOP_PADDING+BOTTOM_PADDING)/parent.height()*100+"%"});