Resize element ondrag when reaches container.
I have a standard div that is set to both drag & resize within it's parent. I need to be able to resize the div as it is dragged into it's parent. I only need this to happen when it's dragged vertically to the bottom, so I have it setup like this:
-
$("#draggable").draggable({
drag: function(event, ui) { AtBottom(); },
axis:'y', containment:'parent'
});
Then I am calculating the bottom position of both the draggable element and it's container(minus offset), and re-sizing it when it's greater..
-
function AtBottom(){
var Cpos = $('#Container').position();
var cheight = $('#Container').height();
var Boundry = Cpos.top+cheight;
var pos = $("#draggable").position();
var height = $("#draggable").height();
var bottom = pos.top+height+10; /*10 as offset */
if(bottom>Boundry){
$("#draggable").height((height-10));
}
}
It appears that jquery stores the element properties throughout the entire drag and doesn't re-calculate them, which makes sense for performance, but isn't allowing this to work the way I would like -> Otherwise it does as it should. On each drag, it decreases the height by 10.
Is there a way I can force Jquery to re-calculate the positions? -> I already tried enable/disable..